jQueryを使ってコンテンツの開閉(アコーディオン)機能を実装する

前準備

jQueryをダウンロードしておき、HTMLのhead要素内で読み込んでおきます。

コード

jQueryの読み込みの後に次のJavaScriptを書きます。

$(function(){
    var toggleSelector = ".accordion-toggle";
    var contentSelector = ".accordion-content";
    $(toggleSelector).hide();
    $(toggleSelector).click(function(){
        $(contentSelector).slideToggle(500);
    });
});

開閉する際の時間を変える場合は500の部分を変えます(単位はミリ秒)。

開閉するコンテンツを指定する

開閉させるコンテンツを指定します。手順は次の通りです。

1. 開閉させるコンテンツのHTMLに対してdiv要素等で親要素を作る。
2. 手順1の親要素のclass属性にaccordion-contentを指定する。

コンテンツの開閉を行うボタンを作る

コンテンツの開閉を行うボタンを作ります。手順は次の通りです。

1. HTMLにボタンとなる要素(a、button等)を作る。
2. ボタンとなる要素のclass属性にaccordion-toggleを指定する。