サイトにアコーディオン機能をつける

2015-08-2323:08

コンテンツの折り畳みができるアコーディオン機能をつける方法について。

まず、HTMLにコンテンツを折り畳むボタンとなるタグを書き、class属性にaccordion-toggleを指定します。

次に、折り畳むコンテンツをdivタグ等で囲み、class属性にaccordion-contentを指定します。

最後に、以下のJavaScriptをheadタグの中に書きます（要jQuery）。

$(function() {
    var toggleSelector = ".accordion-toggle";
    var contentSelector = ".accordion-content";

    $( toggleSelector ).hide();

    $( toggleSelector ).click( function(){
        $( contentSelector ).slideToggle( 500 );
    });
});

折り畳む時間を変える事もでき、数字で500と書いている部分を変更して下さい（単位はミリ秒）。