Скрыть другие элементы в аккордеоне javascript

Question

Я пытаюсь сделать простой аккордеон, используя html и javascript. Вот мой HTML-код:

<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> 

И сценарий:

<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> 

Он работает все в порядке. Но мне было интересно, есть ли простой и быстрый способ скрыть другие части аккордеона при щелчке по одному, чтобы убедиться, что всегда отображается только один блок. Поскольку на данный момент, если я нажимаю на каждую кнопку, я могу отображать все одновременно, но мне это не нравится.

Заранее благодарим за вашу помощь! :)

Answer 1

Просто обновите javascript, как показано ниже.

\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 });