jQueryを利用して、アコーディオンを作成する方法【JavaScript入門】

今回は、主にJavaScript初学者に向けて、jQueryを利用して、アコーディオンを作成する方法について教えていきます！

また、vanilla JS（素のJavaScript）でアコーディオンメニューを実装したい方へ向けて

最後にはそちらの方法も解説しています。

今回は、「jQueryって何？」「どうやって使えるようにするの？」といった話は除きますので

そちらが気になる方は、下の記事を参考にしてください！

あわせて読みたい

jQueryって何？素のJavaScripの違いと導入方法を徹底解説！ Webサイトを作る際に、単純なコードで動きを実装できる便利なjQueryというライブラリが存在します。 特に、Web制作を学習したての人は jQueryって、一体何？ どうやって...

jQueryのコードを打ち込めばアコーディオンを表示できる準備まで整った体で進めていきます。

jQueryを利用して、アコーディオンを実装する方法

jQuryでアコーディオンを実装する際のコードは以下の通りになります。

（背景色などを変更したい場合は、既に設定されている値を変えてカスタマイズしてください。）

See the Pen jQueryでアコーディオン実装（クリックで動く） by わい (@y_programing) on CodePen.

ここで、jQueryの関数の部分の処理を詳しく見ていきましょう。

<script>
        $(function(){
            //クリックで動く
            $('.accordion-trigger').click(function(){
                $(this).toggleClass('active');
                $(this).next('div').slideToggle();
            });
        });
    </script>

jQrueyでは、関数を宣言する場合は

$(function() {});

と書きます。

jQrueyで関数を宣言する場合は、$(function() {});を利用する

なので、最初の行で「ここで関数を使うよ！」と宣言をしているわけですね。

次の行では

$(‘.対象とするclass名’).click(function) {};

と記述することによって、特定のクラス名の要素にクリックイベントを適応させています。

今回は、アコーディオンなので「accordion-trigger」とclass名をつけたdivタグを開閉する処理を与えたいわけなので

$(‘.accordion-trigger’).click(function) {};

としていますね。

そして、肝心の関数の中身が

 $(this).toggleClass('active');
 $(this).next('div').slideToggle();

とあります。

上のコードでは、中身部分だけ引っ張ってきたので書いてませんが、

$(this)

のthisは、ここでは直前に書いてある「accordion-trigger」を指します（下にあるthisも同様）。

toggleClass( ‘active’ );

というのは、「active」というclass名を付けたり外したりの処理をするという意味です。

〇〇Classという処理は

$(this).addClass('active'); //activeというclass名を付ける（だけ）
$(this).removeClass('active'); //activeというclass名を外す（だけ）
$(this).toggleClass('active'); //activeというclass名がなかったら付ける、付いてたら外す。

の、主に3つあるので覚えておきましょう。

今回は、質問が書いてある方をクリックする際に

・閉じていたら開く

・開いたら閉じる

という処理を行なって欲しいので、（addでもremoveでもなく）toggleを利用しています。

class名を付けたり外したりするのは、toggleClass( ‘class名’ );

最後に

アコーディオンメニューの実装はWeb制作案件でも頻出なので

まだちゃんと実装できるか不安な人は、これを機に習得するようにしましょう！

今度も、こういったコーディングやWordPressなどに役立つ情報を発信していこうと思いますので

次回の記事もぜひみてみてください！

お勧め記事