目次
はじめに
今回は1つのアコーディオンボタンをクリックした時に全てのアコーディオンメニューが動作してしまうエラーを直した件について紹介します。
またページを読み込んだときにアコーディオンが開いた状態になっているのでページ読み込み時は閉じた状態にして欲しいとのことだったのでそちらも対応しました。
アコーディオンボタンをクリックした時に全てのアコーディオンが動作する状態
まずは下記でどのような状態かをご確認ください。
「+」のアコーディオンボタンをクリックすると全てのアコーディオンが動作することが確認できます。ここで上記アコーディオンのHTMLのソースコードを確認しましょう。
アコーディオンのHTMLのソースコード例
PR
<div class="accordion">
<ul class="accordion__list">
<li class="accordion__item">
<a href="">
メニュー1
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー2
</a>
</li>
<li class="accordion__item">
<div class="toggle__ttl">
<div class="toggle-btn"></div>
<a href="">
メニュー3
</a>
</div>
<ul class="level02">
<li class="accordion__item">
<div class="toggle__ttl">
<div class="toggle-btn"></div>
<a href="">
メニュー3-1
</a>
</div>
<ul class="level03">
<li class="accordion__item">
<a href="">
メニュー3-1-1
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー3-1-2
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー3-1-3
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー3-1-4
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー3-1-5
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="accordion__item">
<div class="toggle__ttl">
<div class="toggle-btn"></div>
<a href="">
メニュー4
</a>
</div>
<ul class="level02">
<li class="accordion__item">
<div class="toggle__ttl">
<div class="toggle-btn"></div>
<a href="">
メニュー4-1
</a>
</div>
<ul class="level03">
<li class="accordion__item">
<a href="">
メニュー4-1-1
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー4-1-2
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー4-1-3
</a>
</li>
</ul>
</li>
<li class="accordion__item">
<div class="toggle__ttl">
<div class="toggle-btn"></div>
<a href="">
メニュー4-2
</a>
</div>
<ul class="level03">
<li class="accordion__item">
<a href="">
メニュー4-2-1
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー4-2-2
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー4-2-3
</a>
</li>
<li class="accordion__item">
<a href="">
メニュー4-2-4
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>ページ読み込み時にアコーディオンを閉じた状態にするには？
上記HTML内でいう「.level02」（第2階層）「.level03」（第3階層）に対して「display: none;」で非表示にすれば閉じた状態になります。
.level02,
.level03 {
display: none;
}全てのアコーディオンが動作する状態を修正するには？
ソースコードを確認したところJavaScriptに問題がありました。下記のように修正しましょう。jQueryで実装されていたので、修正後のjQueryを紹介します。これでクリックしたアコーディオンボタンの部分のみが動作するようになります。
const toggleBtn = jQuery(".toggle-btn");
jQuery(toggleBtn).on("click", function(){
const clickedTarget = jQuery(this);
clickedTarget.closest(".toggle__ttl").next().slideToggle();
clickedTarget.toggleClass("open");
});
