【jQuery】アコーディオン簡単実装サンプルA（コピペOK）

2021年11月14日2023年3月13日

今回はFAQ（よくある質問）にアコーディオン機能を実装します。

質問をクリックするとその答えがスライドして表示/非表示されます。

読者の悩み

jQueryでアコーディオンメニューを作って見たいけどやり方がわからない…
HTML・CSSしかわからないけど大丈夫かな
簡単で色々なUI作成に応用できる便利なサンプルあるかな

こういった疑問に答えます。

本記事の内容

今日から使える簡単な実装方法をコード付きで解説
記事を読み終えるとアコーディオンメニューの実装方法が一通り理解でき、基礎的なメソッドを知っておけば簡単に作ることができます
コピペ可能なサンプルものせておりますので、使い回しできるコードを知ることができます

この記事を書いている僕は、フロントエンドエンジニア歴が15年ほど。
web業界からゲーム業界まで数多くのwebサイトやアプリケーションを制作しています。
こういった僕が、分かりやすく解説していきます。

骨組みは以下の３つです。

アコーディオンの準備(1)
アコーディオンの準備(2)
アコーディオンの完成

デモページを用意

デモページを用意してますので実際に動きが確認できます。

DEMO

また、GitHubにも実際のソースコードをアップしているのでクローンできます。

phpファイル
 scssファイル
 jsファイル

サンプルコードを用意

サンプルコードで実際のコード［HTML / SCSS / jQuery］を確認できてコピペできます。

サンプルコードはSCSSですがCSSを見たい場合は、GitHubにコンパイルされてないCSSファイルがありますのでご覧ください。

デモページとソースコードを確認しながらご覧ください。

ではコードを見ていきます。

アコーディオンの準備(1)

アコーディオン機能の概要

答えの部分はCSSで非表示にします

.c-accordion {
  &__answer {
    display: none;
  }
}

3つの質問部分には同一のclass名を付与

<ul id="c-accordion__faq-list">
  <li class="c-accordion__faq-list-item">…</li>
  <li class="c-accordion__faq-list-item">…</li>
  <li class="c-accordion__faq-list-item">…</li>
</ul>

それらのclickイベントを作ります

$(function() {
  // FAQのアコーディオン
  $('.c-accordion__faq-list-item').click(function() {
    ︙
  });
    ︙
});

アコーディオンの準備(2)

hasClassメソッド

hasClassメソッドは、引数に指定したクラスを、オブジェクトが持っているか判定するときに使用します。
オブジェクトがそのクラスを持っていればtrue、持っていなければfalseを返します。

<div class="c-accordion__answer">…</div>
    ︙
<div class="c-accordion__answer open">…</div>

var $answer = $(this).find('.c-accordion__answer');
$answer.hasClass('open');

※openクラスについて

「フラグを立てる」為に便宜的に「open」という単語を使っているだけで適当な名前にしても動きます。処理の流れとして最初にページをロードした時に「open」classは存在しないので初期のクリックはelseのブロックを発火させていて、そこで「open」クラスをaddClassで勝手に追加設定しています。

if文を用いた開閉操作

答えの表示・非表示は以下のようにif文を用いて行います。

質問をクリックした時に、$(‘.answer’)がすでにopenクラスを持っていれば、（質問の答えが現在表示されていると判断できるので）openクラスを外し、答えを隠します。

openクラスがない場合はその逆です。

if($answer.hasClass('open')) {
    ︙
} else {
    ︙
}

アコーディオンの完成

アコーディオンのスライド操作

if文がtrueの時（下図で答えが表示されている時）、答えの部分はslideUpメソッドを用いて隠し、質問の右にある「-」記号は「+」記号に書き換えます。

反対にif文がfalseの時は、答えをslideDownメソッドで表示し、「+」記号は「-」に書き換えましょう。

// FAQのアコーディオン
$('.c-accordion__faq-list-item').click(function() {
  var $answer = $(this).find('.c-accordion__answer');
  if($answer.hasClass('open')) {
    $answer.removeClass('open');
    // slideUpメソッドを用いて、$answerを隠してください
    $answer.slideUp();

    // 子要素のspanタグの中身をtextメソッドを用いて書き換えてください
    $(this).find('span').text('+');

  } else {
    $answer.addClass('open');
    // slideDownメソッドを用いて、$answerを表示してください
    $answer.slideDown();
    // 子要素のspanタグの中身をtextメソッドを用いて書き換えてください
    $(this).find('span').text('-');
  }
});

今回は以上になります。

次回はもう少し短いコードで違うメソッドを使用したアコーディオンを実装する方法をご紹介します。

作成方法が不安な方は是非参考にしていただけると嬉しいです。

よかったらシェアしてね！