html・css js・jquery

アコーディオン(同時に開くのは1つのみ、他のは閉じるver)

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

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

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

今回はこの2のパターンについて解説したいと思います。当たり前ですがこっちの方がコードは多め

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

まずはコードから

See the Pen Untitled by 東野江里 (@anyxfbuk-the-scripter) on CodePen.

アコーディオンは1つしか開けない感じになっていると思います。

解説

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-bodydisplay: none;のみです。他は各々のデザインの通り、任意のcssを追加してください。

jQuery

1.アコーディオンヘッドの初期設定

$('.js-accordion-head').each(function() {
  $(this).data('isOpen', false);
});

すべての .js-accordion-head 要素に isOpen というカスタムデータ属性を設定し、初期状態では false(閉じている)にします。

2.クリックイベントのハンドリング

$('.js-accordion-head').on('click', function () {
  var $accordionBody = $(this).nextAll('.js-accordion-body');
  var isOpen = $(this).data('isOpen');
  if (isOpen) {
    // 既に開いている場合は閉じる
    $accordionBody.slideUp();
    $(this).data('isOpen', false);
  } else {
    // 他のアコーディオンボディを閉じて、クリックした要素のボディを開く
    $('.js-accordion-body').slideUp();
    $('.js-accordion-head').data('isOpen', false); // 全てのフラグをリセット
    $accordionBody.slideDown();
    $(this).data('isOpen', true);
  }
});
クリックイベントの設定

.js-accordion-head 要素がクリックされたときに実行される関数が設定されています。

クリックされたヘッダーに対するボディ部分(.js-accordion-body)を取得するために、$(this).nextAll('.js-accordion-body') で、クリックされた要素の次にある .js-accordion-body を選択しています。

isOpen フラグによる開閉の管理

クリックされた要素の isOpen 値をチェックし、現在開いているかどうかを判断します。

開いている場合 (isOpen == true) は、該当するボディを slideUp() で閉じ、isOpen フラグを false に変更します。

閉じている場合 (isOpen == false) は、まずすべてのアコーディオンボディを slideUp() で閉じ、すべてのヘッドの isOpen フラグを false にリセットします。その後、クリックされた要素のボディを slideDown() で開き、isOpentrue に設定します。

slideUp() slideDown()を使用しているので 動きも滑らかです。

まとめ

アコーディオンのヘッド部分をクリックすると、その直後にあるボディ部分が表示されます。
他のアコーディオンが開いている場合は自動的に閉じられ、同時に複数のボディが開かないようになっています。

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

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

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

プログラミングに興味がある方へ

プログラミングに興味があるけど踏み出すのに勇気がいる…
始めてみたけど進め方がわからない、誰かに質問したい…
ネットの教材は高くて手が出ない…
案件を取ってみたけど納品までたどり着けない…

家庭教師の経験を活かし、そんな方のお手伝いをしたいと思っています。

30万もする悪質で高額なコンテンツマーケティングに騙される前に、相談してみませんか?
相談はもちろん無料です。

こちらから、ぜひお気軽にお問い合わせください。
お仕事のご相談や記事にしてほしい内容のリクエストもお待ちしています!

-html・css, js・jquery