2021-10-14

【JS】任意の箇所をクリックしたら隠れている要素が表示される「アコーディオンパネル」の作り方

今回は、任意の箇所をクリックしたら隠れている要素が表示される「アコーディオンパネル」の作り方について紹介します。

質問形式のアコーディオンパネルにも使えるので、是非参考にしてください。

【JS】任意の箇所をクリックしたら隠れている要素が表示される「アコーディオンパネル」の作り方

完成形はこちらです。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

コピペでも動きます。

HTML

<ul class="accordion-items">
  <li class="accordion-item">
    <section>
      <h3 class="accordion-title">質問文が入ります。</h3>
      <div class="accordion-box">
        <p>質問に対する答えが入ります。質問に対する答えが入ります。質問に対する答えが入ります。質問に対する答えが入ります。</p>
      </div>
    </section>
  </li>
  <li class="accordion-item">
    <section>
      <h3 class="accordion-title">質問文が入ります。</h3>
      <div class="accordion-box">
        <p>質問に対する答えが入ります。質問に対する答えが入ります。質問に対する答えが入ります。質問に対する答えが入ります。</p>
      </div>
    </section>
  </li>
  <li class="accordion-item">
    <section>
      <h3 class="accordion-title">質問文が入ります。</h3>
      <div class="accordion-box">
        <p>質問に対する答えが入ります。質問に対する答えが入ります。質問に対する答えが入ります。質問に対する答えが入ります。</p>
      </div>
    </section>
  </li>
</ul>

ulタグであるaccordion-itemsの中に、accordion-itemを3つ用意しました。

質問タイトルやそれに対する答えのテキストは自由に変えてみてください。

そして今回はFont Awesomeアイコンを使うので、Font AwesomeのCDNコードをheadタグの中に記述しておきましょう。

CSS

.accordion-items {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    .accordion-item {
        margin: 10px 0;
        section {
            border: 1px solid #444;
            .accordion-title {
                font-size: 20px;
                padding: 20px;
                transition: click .5s ease-in-out;
                &::after {
                    content: "\f078";
                    font-weight: 700;
                    font-family: "Font Awesome 5 Free";
                }
                
            }
            .accordion-box {
                display: none;
                background-color: #f3f3f3;
                margin: 0 20px 20px 20px;
                padding: 20px;
                font-size: 16px;
                line-height: 1.5;
            }
        }
    }
}

.accordion-items .accordion-item section .close::after {
    content: "\f077";
    font-weight: 700;
    font-family: "Font Awesome 5 Free";
}

タイトルテキストをクリックしたら表示されるaccordion-boxを、通常は消しておきます。

クリックしたらaccordion-boxが表示されるように、後でJavaScriptでコードを書いていきます。

そして、closeクラスがついたら下向きのFont Awesomeアイコンを上向きのアイコンに変わるようにしました。

closeクラスも後でJavaScriptで書いていきます。

JavaScript

今回はjQueryを使うので、以下のjQueryのCDNコードをbodyの閉じタグ付近に記述しましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

そして、JavaScriptコードはこちら。

$('.accordion-title').on('click', function () {//タイトル要素をクリックしたら
    $('.accordion-box').slideUp(500);//クラス名.boxがついたすべてのアコーディオンを閉じる

    var findElm = $(this).next(".accordion-box");//タイトル直後のアコーディオンを行うエリアを取得

    if ($(this).hasClass('close')) {//タイトル要素にクラス名closeがあれば
      $(this).removeClass('close');//クラス名を除去    
    } else {//それ以外は
      $('.close').removeClass('close'); //クラス名closeを全て除去した後
      $(this).addClass('close');//クリックしたタイトルにクラス名closeを付与し
      $(findElm).slideDown(500);//アコーディオンを開く
    }
  });

  $(window).on('load', function () {
    $('.accordion-items li:first-of-type section').addClass("open");
    $(".open").each(function (index, element) {
      var Title = $(element).children('.title');
      $(Title).addClass('close');			
      var Box = $(element).children('.box');	
      $(Box).slideDown(500);			
    });
  });

タイトルであるaccordion-titleをクリックすると、それまで非表示だったaccordion-boxが表示されるようにしました。

そしてcloseクラスが付与され、もう一度クリックしたらcloseが外れます。

そうすることで、先ほどCSSで指定したFont Awesomeアイコンが下向きや上向きのアイコンに変更します。