「jQuery」slideToggle()でアコーディン(accordion)メニューを表示する方法

2020年7月24日

説明
toggleClass(class)
指定したCSSクラスが要素に無ければ追加し、あれば削除する。

slideToggle([speed], [callback])
各要素の高さを操作して、slideDown/slideUpの動作を交互に行います。

1.htmlコード

<dl id="accordion">
    <dt>
        accordionメニューのサンプル
    </dt>
    <dd>
        <ul>
            <li><a href="#">menuAa</a></li>
            <li><a href="#">menuBb</a></li>
            <li><a href="#">menuCc</a></li>
                  <li><a href="#">menuDd</a></li>
        </ul>
    </dd>
</dl>

2.CSSコード

#accordion dt {
    display: inline-block;
    padding-left: 10px;
    background: url("dt-001.png") no-repeat 0 center;
}

#accordion dd {
    display: none;
    padding-left: 10px;
}

3.jqueryコード

$(function(){

    $("#accordion dt").on("click", function() {

        $(this).toggleClass('open');

        $(this).next().slideToggle(100);

    });

})