jQuery: アコーディオンパネルの作り方

jQueryでアコーディオンパネルを作ります。
dl要素を使い、dt要素をクリックするとdd要素を表示。 動作サンプル、サンプルコード、コード解説の順番で記述しています。

動作サンプル

サンプルを別ページで開く

html


<dl>
    <dt>サンプル1</dt>
    <dd>
       <p>サンプル1の文章<br>
        この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
        文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p> 
    </dd>
    <dt>サンプル2</dt>
    <dd><p>サンプル2の文章<br>
        この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
        文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p> 
    </dd>
    <dt>サンプル3</dt>
    <dd><p>サンプル3の文章<br>
        この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
        文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p> 
    </dd>
</dl>

CSS


dl {
    width: 500px;
}
dt {
    font-size: large;
    text-indent: 2em;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    color: white;
    background-color: navy;
    border: solid 1px white;
    cursor: pointer;
}
dd {
    margin: 0px;
    border: solid 1px navy;
}
dd p{
    margin: 0px;
    padding: 10px;
}

JavaScript


$(document).ready(function(){
    
    // 最初のdd以外は非表示にする
    $('dd:not(:first)').css('display', 'none');
    
    // クリックイベント
    $('dl dt').on('click', function(){

        if ($(this).next('dd').css('display') == 'none'){
            // 全てのdd をスライドアップ
            $('dd').slideUp('normal');
            // 該当dd をスライドダウン
            $(this).next('dd').slideDown('normal'); 
        }
    });
});

コード解説

最初に、先頭のdd以外を非表示にする


    // 最初のdd以外は非表示にする
    $('dd:not(:first)').css('display', 'none');

最初に2番目以降のdd要素の'display'を'none'にしています。

thisの次のdd要素を取得


if ($(this).next('dd').css('display') == 'none'){
    // 全てのdd をスライドアップ
    $('dd').slideUp('normal');
    // 該当dd をスライドダウン
    $(this).next('dd').slideDown('normal');
}

next()メソッドを使うことでthisの次のdd要素を取得しています。 まず、全てのdd要素をスライドアップして、次に該当dd要素をスライドダウンします。

jQuery入門