jQueryでアコーディオンパネルを実装する方法

シンプルなコードで作れるアコーディオンパネルです。
開閉時にクラス名を付け替えて、色を変更しています。
同じようなやり方でもっと見るボタンでもっと見るボタンで要素を開閉する方法も書いてますので、そちらもどうぞ。

使い方

jQuery

クリックしたliタグの子要素が非表示だったらスライドダウンで表示させ、クリックした要素にopenというクラス名を付与しています

$(function () {
    $('li > ul').hide();
    $('.accordion > li').click(function () {
        if ($(this).children().is(':hidden')) {
            $(this).children().slideDown();
            $(this).addClass('open');
        } else {
            $(this).children().slideUp();
            $(this).removeClass('open');
        }
    });
});

html

<ul class="accordion">
    <li>List1
        <ul>
        <li>List 1-1</li>
        <li>List 1-2</li>
        <li>List 1-3</li>
        </ul>
    </li>
    <li>List2
        <ul>
        <li>List 2-1</li>
        <li>List 2-2</li>
        <li>List 2-3</li>
        </ul>
    </li>
    <li>List3
        <ul>
        <li>List 3-1</li>
        <li>List 3-2</li>
        <li>List 3-3</li>
        </ul>
    </li>
</ul>