【Web制作】 コンテンツの開閉(アコーディオン)機能を実装する

コンテンツの開閉(アコーディオン)機能をつける方法について。

コンテンツを開閉するJavaScript

jQueryを使うので、予めダウンロードしておき、利用できる状態にして下さい。

その後、次のJavaScriptをHTMLのheadタグの中に書きます。

コンテンツを開閉するJavaScript
$(function(){
    var toggleSelector = ".accordion-toggle";
    var contentSelector = ".accordion-content";
    $( toggleSelector ).hide();
    $( toggleSelector ).click(function(){
        $( contentSelector ).slideToggle( 500 );
    });
});

開閉する際の時間を変える場合は数字で500と書いている部分を変更します(単位はミリ秒)。

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

開閉させるコンテンツを指定します。

手順は次の通りです。

  1. 開閉させるコンテンツのHTMLをdivタグ等で囲む。
  2. 手順1で書いたdivタグ等のclass属性にaccordion-contentを指定する。

以上で開閉させるコンテンツの指定は完了です。

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

コンテンツの開閉を行うボタンを作ります。

手順は次の通りです。

  1. HTMLにボタンのタグ(a、button等)を書く。
  2. ボタンのタグのclass属性にaccordion-toggleを指定する。

以上でボタンは完成です。

カテゴリー

inserted by FC2 system