アコーディオンメニューが崩れる

下記サイトをさ参考にアコーディオンメニューを作ったのですが、空白部分が出来てしまいます。
参考サイト

html

    <dt>アコーディオンメニュー1</dt>
    <dd>アコーディオンメニューが開く。</dd>
  <dd><a href="xxx.html">hoge</a></dd>
    <dd><a href="xxx.html">hogehoge</a></dd>
    <dt>アコーディオンメニュー2</dt>
    <dd>アコーディオンメニューが開く。</dd>
  <dd><a href="xxx.html">hoge</a></dd>
    <dd><a href="xxx.html">hogehoge</a></dd>
  <dd><a href="xxx.html">hoge</a></dd>
    <dd><a href="xxx.html">hogehoge</a></dd>
    <dt>アコーディオンメニュー3</dt>
    <dd>アコーディオンメニューが開く。</dd>
</dl>

css

#acMenu dt{
    display:block;
    width:300px;
    height:50px;
    line-height:50px;
    text-align:center;
    border:#666 1px solid;
    border-radius:5px;
    cursor:pointer;
    }
#acMenu dd{
    background:#f2f2f2;
    width:300px;
    height:50px;
    line-height:50px;
    text-align:center;
    border:#666 1px solid;
    display:none;
    }

javascript

    $("#acMenu dt").on("click", function() {
        $(this).nextUntil("dt","dd").slideToggle();
    });
});

追記
私のサイトはここです。サイドバーの下の方にアコーディオンメニューがあります。

隙間の問題は解決しましたが、アコーディオンメニューが最初から全て開ききっていて、クリックして開くようにしたいです。

行動規範の内容に同意します

回答3件

dd 要素に margin: 0; を入れれば、margin がなくなります。
蛇足ですが、JavaScript 無効環境でコンテンツが表示されないので dd { display: none; } は jQuery で実装したほうが良いと思います。
http://jsfiddle.net/6qup2ebc/2/

JavaScript
1jQuery(function (jQuery) {
2  jQuery('#acMenu dd').slideToggle();
3  jQuery('#acMenu dt').on('click', function () {
4    jQuery(this).nextUntil('dt','dd').slideToggle();
5  });
6});

投稿2015/08/16 03:56

編集2015/08/16 06:30

think49

総合スコア18162

fu-11

2015/08/16 05:01

回答ありがとうございます。think49さんのとおりにしましたが、何故か出来ませんでした。問題が起きた、私のサイトのURLを載せましたので、もし良かったらご確認下さい。アコーディオンメニューはサイドバー下の方にあります。 http://fujiroomblog.blog.fc2.com/

think49

2015/08/16 07:05 編集

元々のコードは #acMenu より <script> が後にあることが期待していた為、お互いの位置が逆転すると、JavaScript コード実行時点で #acMenu が読み込まれていない為に実行されません。 <script> を </body> 直前に持っていくか、親記事に載せたコード(追記しました)を使ってください。

fu-11

2015/08/16 07:47

解決しました。ありがとうございます！

行動規範の内容に同意します

ベストアンサー

先ほど回答したものです。

僕だったらこういう実装にします。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4	<meta charset="UTF-8">
5	<title>Document</title>
6	<style>
7		.toggle-trigger{
8			 display:block;
9		    width:300px;
10		    height:50px;
11		    line-height:50px;
12		    text-align:center;
13		    border:#666 1px solid;
14		    border-radius:5px;
15		    cursor:pointer;
16		}
17		.toggle-contents{
18			display:none;
19		}
20		.toggle-contents > div{
21			background:#f2f2f2;
22	    width:300px;
23	    height: 50px;
24	    line-height:50px;
25	    text-align:center;
26	    border:#999 1px solid;
27		}
28	</style>
29	<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
30</head>
31<body>
32	<div class="toggle-trigger js-trigger">ここを押すと下が開く</div>
33	<div class="toggle-contents"><!-- display:noneにしておく; -->
34		<div>アコーディオンの中身</div>
35		<div>アコーディオンの中身</div>
36		<div>アコーディオンの中身</div>
37	</div>
38	<div class="toggle-trigger js-trigger">ここを押すと下が開く</div>
39	<div class="toggle-contents"><!-- display:noneにしておく; -->
40		<div>アコーディオンの中身</div>
41		<div>アコーディオンの中身</div>
42		<div>アコーディオンの中身</div>
43	</div>
44	<div class="toggle-trigger js-trigger">ここを押すと下が開く</div>
45	<div class="toggle-contents"><!-- display:noneにしておく; -->
46		<div>アコーディオンの中身</div>
47		<div>アコーディオンの中身</div>
48		<div>アコーディオンの中身</div>
49	</div>
50	<script>
51	$('.js-trigger').on('click', function(){
52		$(this).next().slideToggle();
53	})
54	</script>
55</body>
56</html>