带有纯 javascript 的手风琴 - 扩展组不跟随

Question

I am trying to create an accordian and only expand by group during onclick function. So when click on Level 2(1), only div for Level 3(1) is allowed be to expanded. You may take a look at my snippet for clearer understanding. Currently it only worked on Level 2(1).

This is the flow I want:

Click Main Level - Show all the Level 2

Click Level 2(1) - Show all Level 3(1) (if any)

Click Level 2(2) - Show all Level 3(2) (if any) and etc....

This is what I want for the output:

 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; }.active, .accordion:hover { background-color: #ccc; }.panelaccordion { padding: 0 18px; display: none; background-color: white; overflow: hidden; }.text-accordion { display: flex; align-items: center; justify-content: flex-start; flex: 50%; }.button-accordion { display: flex; align-items: center; justify-content: flex-end; flex: 50%; }

 <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(1)</div> <div class="button-accordion" onclick="getid(\'sub-1\');">Click level 2(1)</div> </div> <div class="subpanel-accordion" id="subpanel-1"> <div class="text-accordion">Level 3(1)</div> <div class="button-accordion" onclick="getidsub(\'subpanel-1\');">Click level 3(1)</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 class="subpanel-accordion" id="subpanel-2"> <div class="text-accordion">Level 3(2)</div> <div class="button-accordion" onclick="getidsub(\'subpanel-2\');">Click level 3(2)</div> </div> <div class="accordion" id="sub-3"> <div class="text-accordion">Level 2(3)</div> <div class="button-accordion" onclick="getid(\'sub-2\');">Click level 2(3)</div> </div> </div>

Answer 1

You can use HTML details tag for accordions. I'm adding a small example repl

MDN HTML details Tag