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});
あと、細かいですが、ご提示のコードを見る限りjQueryは使われていないようなので、質問のタグとしてはJavaScript (とHTML) だけでいいかなと思います
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/28 12:43