Jqueryの、アコーディオンメニューの2番目以降を動作させたい！

前提・実現したいこと

Jqueryの、アコーディオンメニューを作ったのですが、
最初のメニューは動くのですが、
２番目、3番目のメニューを動くようにしたい。

発生している問題・エラーメッセージ

2番目以降のアコーディオンメニューが動かない。

該当のソースコード

https://codepen.io/QAtool/pen/qwvqzN
（上記の、『さらに詳しく！02』『さらに詳しく！03』が開閉するように動作させたいと考えております。）

ソースコード

// JavaScript Document
document.querySelector('button.kaihei')
  .addEventListener('click', function() {
   document.querySelector('ul.kaihei').classList.toggle('is-open');
  });

試したこと

連番で、.kaiheiなどのクラス名を指定すれば良いのか？など、
解決方法について調べたが分からなかったです。

補足情報（FW/ツールのバージョンなど）

https://codepen.io/QAtool/pen/qwvqzN
（上記の、『さらに詳しく！02』『さらに詳しく！03』が開閉するように動作させたいと考えております。）

お詳しい方、何卒どうぞよろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

document.querySelector('button.kaihei') とした場合、 'button.kaihei' にヒットする1つ目の要素しか取得できないので、現状の動きになっています。
JavaScriptのコードの修正だけでもなんとかなるといえばなんとかなるのですが、かなりトリッキーな書き方になるので、HTMLも書き換えたほうがいいと思います。
下記のような感じでどうでしょうか

html
1<article>
2  <div class="accordions">
3    <button class="kaihei">さらに詳しく！01</button>
4    <ul class="kaihei ul-0">
5      <li class="li-0">
6        <p>さらに詳しく！01さらに詳しく！01さらに詳しく！01さらに詳しく！01さらに詳しく！01</p>
7        <p>さらに詳しく！01さらに詳しく！01さらに詳しく！01さらに詳しく！01さらに詳しく！01</p>
8      </li>
9    </ul>
10    <p>ポイント！：</p>
11  </div>
12  <div class="accordions">
13    <button class="kaihei">さらに詳しく！02</button>
14    <ul class="kaihei ul-0">
15      <li class="li-0">
16        <p>さらに詳しく！02さらに詳しく！02さらに詳しく！02さらに詳しく！02さらに詳しく！02</p>
17        <p>さらに詳しく！02さらに詳しく！02さらに詳しく！02さらに詳しく！02さらに詳しく！02</p>
18      </li>
19    </ul>
20    <p>ポイント！：</p>
21  </div>
22  <div class="accordions">
23    <button class="kaihei">さらに詳しく！03</button>
24    <ul class="kaihei ul-0">
25      <li class="li-0">
26        <p>さらに詳しく！03さらに詳しく！03さらに詳しく！03さらに詳しく！03さらに詳しく！03</p>
27        <p>さらに詳しく！03さらに詳しく！03さらに詳しく！03さらに詳しく！03さらに詳しく！03</p>
28      </li>
29    </ul>
30    <p>ポイント！：</p>
31  </div>
32</article>

js
1Array.prototype.forEach.call(document.querySelectorAll('.accordions'), div => {
2  div.querySelector('button.kaihei').addEventListener('click', evt => {
3    div.querySelector('ul.kaihei').classList.toggle('is-open');
4  });
5});