今回は、jQueryでアコーディオンを実装する方法について、初心者向けに解説していきます。
アコーディオンの実装は頻出なので、サクッと実装できるようにしましょう。
コンテンツ
jQueryでアコーディオンを実装する方法
実装サンプル
See the Pen
アコーディオン by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.
こちらがアコーディオンの実装サンプルです。
赤い部分をクリックして、実際の動作を確認してみてください。
上のタブをクリックすると、それぞれのソースの詳細が表示されます。
早速、こちらのサンプルの解説をしていきます。
Step1|HTML&CSSでアコーディオンを設置
まずタブ部分のHTML&CSSを準備します。
HTML
<div class="accordion-wrap"> <dl class="accordion-item"> <dt class="title">アコーディオン1のタイトル </dt> <dd class="content">アコーディオン1のコンテンツ</dd> </dl> <dl class="accordion-item"> <dt class="title">アコーディオン2のタイトル </dt> <dd class="content">アコーディオン2のコンテンツ</dd> </dl> </div>
dl,dt,dd
タグを使用して、アコーディオンのタイトルとコンテンツ部分を組みます。
CSS
まずタイトル部分のCSSです。
.title { display: flex;/* flexで横並び */ justify-content: space-between; padding: 15px 20px; background-color: #AA0000; color: #fff; cursor: pointer;/* カーソルをポインターに */ transition: 0.3s; } .title::after { content: '+';/* 疑似要素で「+」を設置 */ } .title.open::after { content: 'ー';/* openクラスが付いたら「-」に */ }
タイトルの右にある「+」マークは、疑似要素を使って表示させます。
今回はタイトルの後ろに表示させるため、疑似要素はbefore
ではなくafter
を使用しています。
疑似要素ではなくspan
タグなどを使用して、マークを表示させる方法もあります。
しかし、HTMLコードの記述量が多くなり、jQuery
の処理が少し複雑になってしまうため、疑似要素を使うのが得策です。
そして、タイトルと疑似要素で作り出したマークをflex
で横並びにします。
position
を使ってマークの位置づけをすることもできますが、flex
での横並びの方がよりシンプルでコード量も削減できます。
.content { display: none;/* コンテンツ部分は非表示に */ padding: 15px 20px; border: 1px solid #AA0000; }
アコーディオンを開いた時に出てくるコンテンツ部分は、display: none;
で非表示にします。
Step2|jQueryでアコーディオンの動きを実装
最後に、jQueryを使ってアコーディオンの動作を実装します。
jQuery
$(function() { /* クリックイベントを設定 */ $('.title').on('click', function() { /* 次の要素をslideToggleで表示 */ $(this).next().slideToggle(); /* openクラスを付与 */ $(this).toggleClass('open'); }); });
以下が実装の流れです。
- ①クリックイベントを設定する。
- ②クリックした要素の次の要素を
slideToggle
で表示or非表示 - ③クリックした際に
open
クラスを付与or外す
①クリックイベントを設定
$('.title').on('click', function() { // ここに、クリックされたときの内容(イベント)を書く。 });
上記のように書くことで、「title
」クラスを持つ要素をクリックしたときのイベントを設定することができます。
②クリックした要素の次の要素をslideToggle
で表示or非表示
$(this).next().slideToggle();
$(this).next()
でクリックした要素の次の要素を取得し、slideToggle()
メソッドで表示or非表示を行います。
slideToggle()
メソッドは、要素が表示されている時は非表示に、非表示の時は表示するメソッドです。
③クリックした際にopen
クラスを付与or外す
$(this).toggleClass('open');
クリックした要素に対し、toggleClass()
メソッドでopen
クラスを付けたり外したりします。
open
クラスが付いていない時は「+」に、付いている時は「-」にします。
まとめ|jQueryでアコーディオンを実装する方法
今回はjQueryでアコーディオンを実装する方法について、初心者向けに解説しました。
アコーディオンを実装する機会は非常に多いので、すぐ実装できるようしておきましょう。
最後までお読みいただきありがとうございました!
(参考)
next()
slideToggle()