アコーディオン（複数開くのOK ver）

アコーディオンの挙動として、1つのアコーディオンを開いたときに

1. 他のアコーディオンも開ける（複数開いた状態にできる）
2. 他のアコーディオンは閉じる（1つしか開いた状態にできない）

大きくこの2パターンがあると思います。

今回はこの1のパターンについて解説したいと思います。当たり前ですがこっちの方が簡単

2のパターンの記事はこちら。

まずはコードから

See the Pen アコーディオン（複数開くのOK ver） by 東野江里 (@anyxfbuk-the-scripter) on CodePen.

かなりシンプルなコードですね。

アコーディオンは複数開けるようになっていると思います。

解説

html

<ul class="list">
  <li class="list-item">
    <p class="js-accordion-head">アコーディオンhead部分①</p>
    <div class="js-accordion-body">
      <p class="txt">①説明テキスト...</p>
    </div>
  </li>
  <!-- 他のリスト項目も同様 -->
</ul>

.js-accordion-head: クリック可能なヘッダー部分。クリックするとその直後にある .js-accordion-body を開閉します。

.js-accordion-body: 開閉されるボディ部分。デフォルトでは非表示。

css

.js-accordion-body {
  display: none;
}

必ず書くのは.js-accordion-bodyのdisplay: none;のみです。他は各々のデザインの通り、任意のcssを追加してください。

js

$('.js-accordion-head').on('click', function () {
  $(this).next('.js-accordion-body').slideToggle();
  $(this).toggleClass('is-open');
});

.js-accordion-headをクリックしたらその次の兄弟要素の.js-accordion-bodyをslideToggle()（閉じていたら開き、開いていたら閉じる）し、また、その.js-accordion-headにis-openクラスをつけ外しする、というだけのコードです。

かなりシンプルですが、これで問題なく動きます。

今回は動きの実装だけなのでcssスタイルを最小限にしていますが、is-openクラスのつけ外しによってcssのカスタマイズも簡単にできるようになっています。

例えばよくある質問で、閉じているときは＋アイコン、開いているときは－アイコンにする、というような実装もcssでできますね。

これはもしリクエストがあればまた記事にしようと思います。

まとめ

今回はシンプルな複数開けるアコーディオンのコード解説でした。

ぜひ使ってみてください。

もしわからないことあれば質問ください！

記事にしてほしい・解説してほしい内容のリクエストもお待ちしています。