アコーディオンの挙動として、1つのアコーディオンを開いたときに
- 他のアコーディオンも開ける(複数開いた状態にできる)
- 他のアコーディオンは閉じる(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-body
のdisplay: 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()
で開き、isOpen
を true
に設定します。
slideUp()
slideDown()
を使用しているので 動きも滑らかです。
まとめ
アコーディオンのヘッド部分をクリックすると、その直後にあるボディ部分が表示されます。
他のアコーディオンが開いている場合は自動的に閉じられ、同時に複数のボディが開かないようになっています。
ぜひ使ってみてください。
もしわからないことあれば質問ください!
記事にしてほしい・解説してほしい内容のリクエストもお待ちしています。