Verstecken Sie andere Elemente in einem Javascript Akkordeon

Question

Ich versuche, ein einfaches Akkordeon mit HTML und Javascript zu machen. Hier ist mein HTML-Code:

<button class="accordion" id="part_one">Part One</button> 
<div class="panel"> 
</div> 

<button class="accordion" id="part_two">Part Two</button> 
<div class="panel"> 
</div> 

Und das Skript:

<script> 
var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function(){ 
     this.classList.toggle("active"); 
     this.nextElementSibling.classList.toggle("show"); 
    } 
}</script> 

Es funktioniert alles in Ordnung. Aber ich habe mich gefragt, ob es eine einfache und schnelle Möglichkeit gibt, andere Teile des Akkordeons zu verstecken, wenn man auf eines klickt, um sicherzustellen, dass immer nur ein Block angezeigt wird. Denn ab sofort, wenn ich auf jeden Knopf klicke, kann ich alles gleichzeitig anzeigen, aber ich mag es nicht.

Vielen Dank im Voraus für Ihre Hilfe! :)

Answer 1

Aktualisieren Sie einfach das Javascript wie unten.

\t document.addEventListener("DOMContentLoaded", function(event) { 
 
\t \t var acc = document.getElementsByClassName("accordion"); 
 
\t \t var panel = document.getElementsByClassName('panel'); 
 
\t \t for (var i = 0; i < acc.length; i++) { 
 
\t \t \t acc[i].onclick = function() { 
 
\t \t \t \t var setClasses = !this.classList.contains('active'); 
 
\t \t \t \t setClass(acc, 'active', 'remove'); 
 
\t \t \t \t setClass(panel, 'show', 'remove'); 
 
\t \t \t \t if (setClasses) { 
 
\t \t \t \t \t this.classList.toggle("active"); 
 
\t \t \t \t \t this.nextElementSibling.classList.toggle("show"); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t \t function setClass(els, className, fnName) { 
 
\t \t \t for (var i = 0; i < els.length; i++) { 
 
\t \t \t \t els[i].classList[fnName](className); 
 
\t \t \t } 
 
\t \t } 
 

 
\t });