【jQuery】クリックしたら開閉するアコーディオンを作成する方法

というわけで今回はクリックしたらアコーディオンが開いたり閉じたりする実装をご紹介します。
今回は「jQuery」での実装を見てみましょう！！

アコーディオンでQ&Aを作成する

これはよくある実装かと思います。
「Q」をクリックすると「A」がアコーディオンで表示される実装。
まずは、HTML、CSSをさらっと紹介します。

HTML、CSS

まずはさらっとHTMLとCSSを共有いたします。
まあ、ここは特別なことはしてないのでさらっと。

【HTML】

　　　　　　<div class="p-qa__box c-qa" id="training">
              <h2 class="c-qa__title">研修・制度について</h2>
              <div class="c-qa__box">
                <div class="c-qa__content">
                  <p class="c-qa__question"><span>評価制度・給与制度について教えてください。</span></p>
                  <p class="c-qa__answer is-active"><span>回答が入ります。回答が入ります。</span></p>
                </div>
                <div class="c-qa__content">
                  <p class="c-qa__question"><span>研修制度について教えてください</span></p>
                  <p class="c-qa__answer"><span>回答が入ります。回答が入ります。回答が入ります。</span></p>
                </div>
                <div class="c-qa__content">
                  <p class="c-qa__question"><span>社内異動制度はありますか</span></p>
                  <p class="c-qa__answer"><span>回答が入ります。回答が入ります。回答が入ります。</span></p>
                </div>
              </div>
            </div>

【CSS】

.c-qa__title {
  font-size: myrem(22);
  line-height: 1.7;

  @include mq('md') {
    font-size: myrem(28);
  }
}

.c-qa__box {
  margin-top: myrem(12);
  padding: myrem(16) myrem(12) myrem(16);
  background-color: $light_grey;

  @include mq('md') {
    margin-top: myrem(24);
    padding: myrem(32) myrem(24) myrem(32);
  }
}

.c-qa__content:not(:first-child) {
  margin-top: myrem(22);

  @include mq('md') {
    margin-top: myrem(43);
  }
}

.c-qa__question {
  background-color: $white;
  padding: myrem(10) myrem(12);

  @include mq('md') {
    padding: myrem(20) myrem(24);
  }
}

.c-qa__question:hover {
  @include mq('md') {
    cursor: pointer;
  }
}

.c-qa__question span {
  display: block;
  font-weight: $Medium;
  font-size: myrem(14);
  padding-left: myrem(35);
  padding-right: myrem(25);
  position: relative;

  @include mq('md') {
    font-size: myrem(16);
    padding-left: myrem(55);
    padding-right: myrem(25);
  }
}

.c-qa__question span::before {
  position: absolute;
  content: "Q.";
  font-family: $font-en;
  font-weight: bold;
  font-size: myrem(20);
  color: $grey_logo;
  top: myrem(-4);
  left: 0;

  @include mq('md') {
    font-size: myrem(24);
    top: myrem(-5);
  }
}

.c-qa__question span::after {
  position: absolute;
  content: "";
  width: myrem(8);
  height: myrem(8);
  border-right: 1px solid $grey_logo;
  border-bottom: 1px solid $grey_logo;
  top: myrem(5);
  transform: rotate(45deg);
  right: myrem(4);
}

.c-qa__answer {
  padding: myrem(10) myrem(12) 0;

  @include mq('md') {
    padding: myrem(23) myrem(25) 0;
  }
}

.c-qa__answer.is-active {
  display: block;
}

.c-qa__answer span {
  display: block;
  font-weight: $Regular;
  font-size: myrem(14);
  line-height: 1.8;
  letter-spacing: 0.04em;
  padding-left: myrem(35);
  position: relative;

  @include mq('md') {
    padding-left: myrem(51);
  }
}

.c-qa__answer span::before {
  position: absolute;
  content: "A.";
  font-family: $font-en;
  font-size: myrem(20);
  font-weight: bold;
  top: myrem(-4);
  left: 0;

  @include mq('md') {
    font-size: myrem(24);
    top: myrem(-5);
  }
}

CSSに関しては、Sass使ってますので「$○○○」で表記されているのは変数です。
また、フォントサイズなどは自作関数（myrem）を使用しております。
ご自身の環境で使われる際はお気を付けください。

HTMLでは、ページを開いた際に一番上のアコーディオンは開けときたいので
「.c-qa__answer」には「is-active」を付けております。

JQueryのコード

続いてjQueryのコードを紹介します。

jQuery(function ($) {

　$('.c-qa__answer').hide();
  $('.c-qa__answer.is-active').show();
  $('.c-qa__content').on('click', function() {
    if($('.c-qa__answer',this).hasClass('is-active')){
      
    }else{
      $('.c-qa__answer').removeClass('is-active');
      $('.c-qa__answer').slideUp();
      $('.c-qa__answer',this).toggleClass('is-active');
      $('.c-qa__answer',this).slideDown();
    }
    
  });
});

ではコードを解説していきます。

まずは最初の2行、「$(‘.c-qa__answer’).hide();」、「$(‘.c-qa__answer.is-active’).show();」ですが、

「$(‘.c-qa__answer’).hide();」　⇒　「.c-qa__answer」のクラスがついた要素を非表示に。
「$(‘.c-qa__answer.is-active’).show();」　⇒　「.c-qa__answer.is-active」のクラスがついた要素を表示。

順番も大事です！先に「hide」を設定しておかないと思ったような挙動になりません。
「hide」で非表示にしてから「show」で「is-active」のついた要素、つまりページを開いた際に
表示させたい最初の「A」アコーディオンを開いている状態にしています。

続いて次の行、

$(‘.c-qa__content’).on(‘click’, function() 　⇒　「.c-qa__content」のクラスがついた要素をクリックした場合

そしてここから「if　else」を使って条件分岐しています。

if($(‘.c-qa__answer’,this).hasClass(‘is-active’)){
}else{
$(‘.c-qa__answer’).removeClass(‘is-active’);
$(‘.c-qa__answer’).slideUp();
$(‘.c-qa__answer’,this).toggleClass(‘is-active’);
$(‘.c-qa__answer’,this).slideDown();
}

まずは、条件分岐が真のとき、
if($(‘.c-qa__answer’,this).hasClass(‘is-active’)){ }　⇒　クリックした「.c-qa__answer」のクラスがついた要素が
「is-active」のクラスを持っているときは、何もしないとしています。

そして、それ以外の場合（偽のとき）は、

$(‘.c-qa__answer’).removeClass(‘is-active’);　⇒　「.c-qa__answer」のクラスから「is-active」を取り除き
$(‘.c-qa__answer’).slideUp();　⇒　「.c-qa__answer」のクラスがついた要素をスライドで非表示にする

$(‘.c-qa__answer’,this).toggleClass(‘is-active’);　⇒　クリックした「.c-qa__answer」のクラスがついた要素から「is-active」クラスを付け外しする
$(‘.c-qa__answer’,this).slideDown(); ⇒　クリックした「.c-qa__answer」のクラスがついた要素をスライドで表示にする

としています。

ここでポイントとなるのは「this」の使い方ですね。
ここでは「クリックする動作」を「this」としていて、特定のクラスと合わせることで
「クリックしたクラスの要素」と指定することができます。

まとめ

というわけで今回はクリックしたらアコーディオンが開いたり閉じたりする実装をご紹紹介しました。
実案件でも頻出ですのでぜひとも覚えておきましょー。