今回は、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">アコーディオン１のタイトル
    </dt>
    <dd class="content">アコーディオン１のコンテンツ</dd>
  </dl>
  <dl class="accordion-item">
    <dt class="title">アコーディオン２のタイトル
    </dt>
    <dd class="content">アコーディオン２のコンテンツ</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()