複数あるアコーディオンを個別に開閉させたい

前提・実現したいこと

複数あるアコーディオンを個別に開閉させたいです。

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

エラーはありません。

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <style>
8        .menu {
9            background: #01558d;
10            color: white;
11            padding: 5px 0 5px 10px;
12            cursor: pointer;
13        }
14        .accordion ul {
15            margin: 0;
16            background: #e7e7e7;
17            max-height: 0;
18            overflow: hidden;
19            transition: all .8s;
20        }
21        
22        .accordion.open ul {
23            max-height: 300px;
24        }
25        .accordion li {
26            padding: 5px 0;
27        }
28    </style>
29</head>
30<body>
31    <div class="accordion">
32        <div class="menu" onclick="toggle()">
33        メニュー
34        </div>
35            <ul>
36                <li>ハンバーガー</li>
37                <li>チーズバーガー</li>
38                <li>テリヤキバーガー</li>
39                <li>ベーコンバーガー</li>
40                <li>ベジタブルバーガー</li>
41                <li>ライスバーガー</li>
42            </ul>
43    </div>
44    <div class="accordion">
45        <div class="menu" onclick="toggle()">
46        メニュー
47        </div>
48            <ul>
49                <li>ハンバーガー</li>
50                <li>チーズバーガー</li>
51                <li>テリヤキバーガー</li>
52                <li>ベーコンバーガー</li>
53                <li>ベジタブルバーガー</li>
54                <li>ライスバーガー</li>
55            </ul> 
56    </div>    
57    <script>
58        //この関数だと全てのアコーディオンが開閉してしまいます。
59        // function toggle() {
60        // document.querySelector('.accordion').classList.toggle('open');
61        // }
62        
63        function toggle() {
64            const accordionMenu = document.querySelector('.accordion > .menu');
65            for(let i=0; i<accordionMenu.length; i++){
66                accordionMenu[i].classList.toggle('open');
67            }
68        }
69        
70    </script>
71</body>
72</html>

試したこと

.accordion ul {
margin: 0;
background: #e7e7e7;
max-height: 0;
overflow: hidden;
transition: all .8s;
display: none; <-A
}

    .accordion.open ul {
        max-height: 300px;
        display: block; <-B
    }

A,Bを追加したりしましたが、全く動きませんでした。

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

ここにより詳細な情報を記載してください。

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

回答2件

イベント発行の親を利用して

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <style>
8        .menu {
9            background: #01558d;
10            color: white;
11            padding: 5px 0 5px 10px;
12            cursor: pointer;
13        }
14        .accordion ul {
15            margin: 0;
16            background: #e7e7e7;
17            max-height: 0;
18            overflow: hidden;
19            transition: all .8s;
20        }
21
22        .accordion.open ul {
23            max-height: 300px;
24        }
25        .accordion li {
26            padding: 5px 0;
27        }
28    </style>
29</head>
30<body>
31    <div class="accordion">
32        <div class="menu" onclick="toggle(event)">
33        メニュー
34        </div>
35            <ul>
36                <li>ハンバーガー</li>
37                <li>チーズバーガー</li>
38                <li>テリヤキバーガー</li>
39                <li>ベーコンバーガー</li>
40                <li>ベジタブルバーガー</li>
41                <li>ライスバーガー</li>
42            </ul>
43    </div>
44    <div class="accordion">
45        <div class="menu" onclick="toggle(event)">
46        メニュー
47        </div>
48            <ul>
49                <li>ハンバーガー</li>
50                <li>チーズバーガー</li>
51                <li>テリヤキバーガー</li>
52                <li>ベーコンバーガー</li>
53                <li>ベジタブルバーガー</li>
54                <li>ライスバーガー</li>
55            </ul> 
56    </div>    
57    <script>
58        function toggle(e) {
59          e.target.parentNode.classList.toggle('open');
60        }
61    </script>
62</body>
63</html>

投稿2020/05/29 10:01

rururu3

総合スコア5545

whitehorse85921

2020/05/29 10:07

rururu3さん、ありがとうございます。 rururu3さんのプログラムも大変参考になりました。

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

ベストアンサー

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2  document.querySelectorAll('.accordion').forEach(x=>{
3    x.addEventListener('click',()=>x.classList.toggle('open'));
4  });
5});