How do I create multiple toggling buttons?

Question

I am trying to create an accordion. It works great when there is only one item. Whenever I try to add same div below my code, it crashes. What do I have to do so this code works for multiple same divs?

 var panel = document.querySelector(".panel"); var button = document.querySelector(".accordion"); button.addEventListener("click", function() { if (panel.style.display === "none") { panel.style.display = "block"; } else { panel.style.display = "none"; } });

 .panel { display: none }

 <button class="accordion" id="accordion">Section 1</button> <div class="panel" id="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo </div>

I want it like this

<button class="accordion" id="accordion" >Section 1</button>
<div class="panel" id="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo
</div>

<button class="accordion" id="accordion" >Section 2</button>
<div class="panel" id="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo
</div>

Answer 1

Rather than rely on id 's, reference the panels via their position, relative to the button element that is clicked. And, rather than set up event handlers for each button, use event delegation and set one handler up on a container of the whole structure.

Also, don't use inline styles. The classList API is very simple and helpful here.

Lastly, having a p inside of a div is redundant.

 // Get all the panels into a collection let panels = document.querySelectorAll(".panel"); // Set up one event handler on a container of all the buttons and panels document.querySelector(".accordion").addEventListener("click", function(event) { // First, hide all the panels panels.forEach(function(panel){ panel.classList.add("hidden"); }); // If a button was clicked if(event.target.classList.contains("btn")){ // Now, show just the selected panel event.target.nextElementSibling.classList.toggle("hidden"); } });

 .hidden { display: none }.btn { display:block; }

 <section class="accordion"> <button class="btn">Section 1</button> <p class="panel hidden"> 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo </p> <button class="btn">Section 2</button> <p class="panel hidden"> 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo </p> <button class="btn">Section 3</button> <p class="panel hidden"> 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo </p> <button class="btn">Section 4</button> <p class="panel hidden"> 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo </p> </section>