jQuery

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

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

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

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

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

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

続いて jquery のファイルを読み込みます。
Google が提供している CDN を使った jQuery ファイルを読み込む場合はこちら。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

続いて、開閉のスクリプトを追加します。
例えば、ボタン要素をクリックしたときに、次のブロック要素を開閉させる場合は、次のコードを HTML ファイル内に追加します。

<script type="text/javascript">
$(function(){
$('.button').click(function() {
$(this).toggleClass('selected');
$(this).next().slideToggle();
}).next().hide();
});
</script>

別ファイルの javascript に追加する場合はこちら。

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

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

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

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

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

まとめ

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

この記事をシェアする

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