初心者きつねウェブサイトでよくFAQとかでアコーディオンメニューが使われるけど、あれってどうやって実装するの？
今回は、主にJavaScript初学者に向けて、jQueryを利用して、アコーディオンを作成する方法について教えていきます！
アコーディオンメニューとは、FAQなどでお馴染みの、質問部分をクリックしたら回答部分が現れる動きがある要素のこと。
今回はJavaScriptのライブラリの1つであるjQueryを利用して作成していきますが、コードも全て公開していきます！
また、vanilla JS（素のJavaScript）でアコーディオンメニューを実装したい方へ向けて
最後にはそちらの方法も解説しています。
今回は、「jQueryって何？」「どうやって使えるようにするの？」といった話は除きますので
そちらが気になる方は、下の記事を参考にしてください！
jQueryの概要に加えて、便利なCDNを利用する方法についても上の記事で解説しています。
わい今回の記事では、jQueryのコードを打ち込めばアコーディオンを表示できる準備まで整っている体で進めていくよ！
jQueryを利用して、アコーディオンを実装する方法
jQueryを利用したアコーディオンの実装は、以下の手順で行うことができます。
- アコーディオンをHTMLで書く
- ①にCSSで枠線を付けたり、回答部分を非表示にする
- jQueyでアコーディオンに開閉の動きをつける
①：アコーディオンをHTMLで書く
まずはアコーディオン部分をHTMLで書いていきます。
書き方は1つではないですが
- divタグで質問部分と回答部分を形成していき、そのセットをまたdivタグで囲む
- divタグで質問部分と回答部分を形成していき、その全体をdivタグで囲む
などの構成で作ることができます。
今回は、後者の構成で作成しています。
<div class="accordion">
<div class="accordion-trigger">
Q1.ここに質問が入ります。
</div>
<div class="accordion-answer">
A1.ここに回答が入ります。
</div>
<div class="accordion-trigger">
Q2.ここに質問が入ります。
</div>
<div class="accordion-answer">
A2.ここに回答が入ります。
</div>
</div>②：①にCSSで枠線を付けたり、回答部分を非表示にする
①ができたら、それにCSSを当てていきます。
.accordion {
border: 1px solid #333;
}を適応し枠線を付けたり
.accordion-answer {
display: none
}で、回答部分を非表示にしておきます（質問部分がクリックされたら表示されるようにするため）。
③：jQueyでアコーディオンに開閉の動きをつける
最後に、jQueyでアコーディオンに開閉の動きをつけていきます。
詳細はこの後述しますが、まずは実際のコードを見ていきましょう。
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名’ );
WordPressサイトに実装する際の注意点
WordPressでは、標準状態でjQueryが利用できるため
WordPressサイトにおいても、今回紹介したアコーディオンを実装することができます。
ただし、注意点としてfunction部分の「$」を「jQuery」に変え、引数に「$」を加えて記述をする必要があります。
今回のjQueryのコードは
<script>
$(function(){
//クリックで動く
$('.accordion-trigger').click(function(){
$(this).toggleClass('active');
$(this).next('div').slideToggle();
});
});
</script>でしたが、WordPressで利用する場合には
//WordPressで利用する場合
<script>
jQuery(function($){
//クリックで動く
$('.accordion-trigger').click(function(){
$(this).toggleClass('active');
$(this).next('div').slideToggle();
});
});
</script>のように変更する必要があります。
この変更を行わないと、うまく動作しないことがあるので気をつけてください。
最後に
ということで、今回は「jQueryを利用して、アコーディオンを作成する方法」について解説していきました！
昔はパソコン主流だった時代があるので必要ありませんでしたが
今の時代はスマホ主流でレスポンシブ対応は必須になってきており、アコーディオンメニューの実装はWeb制作案件でも頻出なので
まだちゃんと実装できるか不安な人は、これを機に習得するようにしましょう！
今度も、こういったコーディングやWordPressなどに役立つ情報を発信していこうと思いますので
次回の記事もぜひみてみてください！
コメント