Accordion menu drop down only works for first drop down

Question

I'm trying to implement a simple accordion drop-down menu with simple HTML and JS. Below shows the relevant JS, CSS and HTML code.

 var heading = document.getElementsByClassName("drop_title"); var headingNumber = heading.length; for (var i = 0 ; i < headingNumber; i++) { heading[i].addEventListener("click", () => { document.querySelector('.accordion_box li ul').classList.toggle('drop_list') }); }

 .accordion_box { background: #004d7a; font-family: 'Zen Kaku Gothic Antique', sans-serif; color: white; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; width:50%; margin-top: 25%; } .accordion_box ul li { list-style-type:none; } .drop_title { font-size:17px; padding:0 10px; } .drop_title:hover{ border-left: 5px solid #a8eb12; border-bottom: 5px solid #a8eb12; } .accordion_box ul ul li a{ color:white; font-size:14px; text-decoration:none; } .accordion_box ul ul li a:hover{ border-left: 5px solid #a8eb12; } .drop_list{ display:none; } .accordion_box li.active ul{ display:block; transition: all 2s ease-in-out; }

 <div class="accordion_box"> <ul> <li> <h3 class="drop_title">Menu One</h3> <ul class="drop_list"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> <li> <h3 class="drop_title">Menu Two</h3> <ul class="drop_list"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> <li> <h3 class="drop_title">Menu Three</h3> <ul class="drop_list"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> <li> <h3 class="drop_title">Menu Four</h3> <ul class="drop_list"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> </ul> </div>

When I click on Menu One, I can show and hide the list. But when I click on any other title, instead of dropping down that relevant list, Menu one gets dropped down instead.

Can I know what I'm doing wrong here?

Answer 1

You can use forEach if you want to gave all the elements event click, on the function you have to gave a parameter and then you have to add event click by the parameter, and by the parameter you can select parent and then find the element which you want to toggle class.

Here is the code:

 var heading = document.querySelectorAll(".drop_title"); var headingNumber = heading.length; heading.forEach(function(el) { el.addEventListener("click", function() { el.parentNode.querySelector('.accordion_box li ul').classList.toggle('drop_list'); }); });

 .accordion_box { background: #004d7a; font-family: 'Zen Kaku Gothic Antique', sans-serif; color: white; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; width:50%; margin-top: 25%; } .accordion_box ul li { list-style-type:none; } .drop_title { font-size:17px; padding:0 10px; } .drop_title:hover{ border-left: 5px solid #a8eb12; border-bottom: 5px solid #a8eb12; } .accordion_box ul ul li a{ color:white; font-size:14px; text-decoration:none; } .accordion_box ul ul li a:hover{ border-left: 5px solid #a8eb12; } .drop_list{ display:none; } .accordion_box li.active ul{ display:block; transition: all 2s ease-in-out; }

 <div class="accordion_box"> <ul> <li> <h3 class="drop_title">Menu One</h3> <ul class="drop_list"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> <li> <h3 class="drop_title">Menu Two</h3> <ul class="drop_list"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> <li> <h3 class="drop_title">Menu Three</h3> <ul class="drop_list"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> <li> <h3 class="drop_title">Menu Four</h3> <ul class="drop_list"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </li> </ul> </div>