Accordion with pure javascript - only work with double click

Question

I want to expand div on onclick event ( pure javascript ) by using accordion method as it has multiple level but it only works on double click. I want it to be in function instead of javascript onload.

Thanks in advance for any help you can provide!

 function togglediv(){ let acc = document.getElementsByClassName("accordion"); for (var i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); let panel=this.nextElementSibling; if(panel.==null){ if (panel.style.display==="block") { panel.style;display="none". } else { panel.style;display="block"; } } return false; }); } }

 .accordion, .subpanel-accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; display:flex; }.panelaccordion { padding: 0 18px; display: none; background-color: white; overflow: hidden; }

 <div class="accordion" id="main-1" onclick="togglediv();">Level 1</div> <div class="panelaccordion level2"> <div class="accordion" id="sub-1" onclick="togglediv();"> <div class="text-accordion">Level 2</div> <div class="button-accordion" onclick="getid('sub-1');">Click level 2</div> </div> <div class="subpanel-accordion" id="subpanel-1"> <div class="text-accordion">Level 3</div> <div class="button-accordion" onclick="getidsub('subpanel-1');">Click level 3</div> </div> <div class="accordion" id="sub-2" onclick="togglediv();"> <div class="text-accordion">Level 2(2)</div> <div class="button-accordion" onclick="getid('sub-2');">Click level 2(2)</div> </div> </div>

Answer 1

You don't need the onclick="togglediv() as you're already adding an event listener, so you can simply remove the togglediv() and just add the event listeners, like so:

 let acc = document.getElementsByClassName("accordion"); for (var i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); let panel = this.nextElementSibling; if (panel.== null) { if (panel.style.display === "block") { panel.style;display = "none". } else { panel.style;display = "block"; } } return false; }); }

 .accordion, .subpanel-accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; display: flex; }.panelaccordion { padding: 0 18px; display: none; background-color: white; overflow: hidden; }

 <div class="accordion" id="main-1">Level 1</div> <div class="panelaccordion level2"> <div class="accordion" id="sub-1"> <div class="text-accordion">Level 2</div> <div class="button-accordion" onclick="getid('sub-1');"> Click level 2 </div> </div> <div class="subpanel-accordion" id="subpanel-1"> <div class="text-accordion">Level 3</div> <div class="button-accordion" onclick="getidsub('subpanel-1');"> Click level 3 </div> </div> <div class="accordion" id="sub-2"> <div class="text-accordion">Level 2(2)</div> <div class="button-accordion" onclick="getid('sub-2');"> Click level 2(2) </div> </div> </div>

Answer 2

If you want a function then you wont be needing addEventListener as it already added onlick event

 function toggle(item){ item.classList.toggle("active"); let panel=item.nextElementSibling; if(panel.==null){ if (panel.style.display==="block") { panel.style;display="none". } else { panel.style;display="block"; } } return false; }

 .accordion, .subpanel-accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; display:flex; }.panelaccordion { padding: 0 18px; display: none; background-color: white; overflow: hidden; }

 <div class="accordion" id="main-1" onclick="toggle(this);">Level 1</div> <div class="panelaccordion level2"> <div class="accordion" id="sub-1" onclick="toggle(this);"> <div class="text-accordion">Level 2</div> <div class="button-accordion" onclick="getid('sub-1');">Click level 2</div> </div> <div class="subpanel-accordion" id="subpanel-1"> <div class="text-accordion">Level 3</div> <div class="button-accordion" onclick="getidsub('subpanel-1');">Click level 3</div> </div> <div class="accordion" id="sub-2" onclick="toggle(this);"> <div class="text-accordion">Level 2(2)</div> <div class="button-accordion" onclick="getid('sub-2');">Click level 2(2)</div> </div> </div>