HTMLアコーディオンの<dd>の複数表示仕方

Question

リンク内容
上記のサイトでは<ul>や<li>等のタグで

<ul>内に複数のブロックを置けてますが、 <dl> <dt> <dd> 等のタグを使って<dt>内に<dd>を複数htmlで記述するとどうしても、 <dd>の一つのタグの分しか表示されません。 理想は、上記のサイトのようなアコーディオンです。 どなたか<dd>を複数表示する方法を私にご伝授願います。

HTML
         <dl id="acMenu">
				<dt>2015年度イベント</dt>
				<dd><a href="xxx.html">hoge</a></dd>
				<dd><a href="xxx.html">hogehoge</a></dd>
				<dt>2014年度</dt>
				<dd>hoge</dd>
				<dd>hoge</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:200px;
    height:50px;
    line-height:50px;
    text-align:center;
    border:#666 1px solid;
    display:none;
    }
js
<script>
    $(function(){
        $("#acMenu dt").on("click", function() {
            $(this).next().slideToggle();
        });
    });
</script>

jQueryに関しては無知なので、丁寧な回答だと大変有難いです。
長文失礼しました。

今、書いてませんがjQueryのライブラリの参照はしてあります。

Answer 1

nextUntilというメソッドを使う事で「次のdt要素までのdd要素全て」を指定する事が出来ます。
また、第2引数に指定した"dd"を省略すると「次のdt要素までの要素全て」が対象になります。
定義リストであれば第2引数は省略しても構わないと思います。

$(function(){
    $("#acMenu dt").on("click", function() {
        // next()をnextUntil("dt", "dd")に変更
        $(this).nextUntil("dt","dd").slideToggle();
    });
});

Comments

[kolon.m]

無事できました。有難うございます(^^)