jQuery

コピペで簡単 jQuery でアコーディオンを実装する方法

コピペで簡単 jQuery でアコーディオンを実装する方法を紹介します。
例えば、シンプルな構成のアコーディオンを実装したい時に便利な方法です。

  1. jQuery でアコーディオンを実装する方法
    1. ボタンを押した時にクラスを付与する方法
    2. スライドのアニメーションスピードを変更する方法

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

jQuery でアコーディオンを実装する方法を紹介します。
ベースの HTML は次の通りです。

<div class="button">ボタン</div>
<div class="accordion-block">アコーディオン</div>

例えば、ボタン要素の次の要素を開閉させる場合は次のコードを javascript に追加します。

$(function(){
$('.button').click(function() {
$(this).toggleClass('selected');
$(this).next().slideToggle();
}).next().hide();
});

クラス button をクリックした時に、その直下にあるブロック要素を開閉します。

ボタンを押した時にクラスを付与する方法

ボタンを押した時にクラスを付与する場合は toggleClass() を使用します。
toggleClass() で付与したいクラス名を指定します。

スライドのアニメーションスピードを変更する方法

スライドの開閉スピードを変更する場合は slideToggle() に値を指定します。
スライドのアニメーションスピードは基本の三段階(slow,normal,fast)と、時間をミリ秒単位で指定する方法が選べます。
値の指定がなければ normal が設定されます。
任意の時間を指定する場合、数値で 3000(3秒)と指定することもできます。

まとめ

コピペで簡単 jQuery でアコーディオンを実装する方法を紹介しました。

合わせて読みたい関連記事