Открывать только одну аккордеонную вкладку за один раз

Question

У меня есть аккордеон, который работает очень хорошо, он хорошо выглядит на сайте и работает так, как должен. Тем не менее, я пытаюсь добавить к нему еще некоторые функции JavaScript, чтобы сделать его более профессиональным.

В настоящее время аккордеон позволяет одновременно открывать несколько панелей, т. Е. Если я открою одну вкладку, а затем откройте другую вкладку, обе вкладки будут открыты одновременно. И единственный способ закрыть эти панели - это перехватить заголовок.

Что бы мне хотелось, это код JavaScript, который предотвращает одновременное открытие нескольких вкладок, поэтому, если я нажму на новую панель, сначала должен закрыть существующую открытую панель. Вот мой HTML код для аккордеона:

<div class="accordion"><b>Heading 1</b></div> 
<div class="panel"> 
    <p class="text-light">Text 1</p> 
</div> 
<div class="accordion"><b>Heading 2</b></div> 
<div class="panel"> 
    <p class="text-light">Text 2</p> 
</div> 

Вот мой код JavaScript в отдельный файл JavaScript, который в настоящее время позволяет несколько вкладок, чтобы быть открытыми в одно время

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

Не уверен, что если вам нужны все CSS, но есть CSS для отображения панели

div.panel.show { 
    display: block !important; 
} 

Надеюсь, кто-то может помочь! Заранее спасибо!

Answer 1

Для достижения этой цели необходимо сбросить состояние аккордеона обратно в исходное состояние на каждый клик, прежде чем установить необходимые классы на перешедших элементов. Для этого вы можете извлечь функциональные возможности, чтобы установить имена классов в их собственную функцию и вызвать их по мере необходимости. Попробуйте это:

var acc = document.getElementsByClassName("accordion"); 
var panel = document.getElementsByClassName('panel'); 

for (var i = 0; i < acc.length; i++) { 
    acc[i].onclick = function() { 
     var setClasses = !this.classList.contains('active'); 
     setClass(acc, 'active', 'remove'); 
     setClass(panel, 'show', 'remove'); 

     if (setClasses) { 
      this.classList.toggle("active"); 
      this.nextElementSibling.classList.toggle("show"); 
     } 
    } 
} 

function setClass(els, className, fnName) { 
    for (var i = 0; i < els.length; i++) { 
     els[i].classList[fnName](className); 
    } 
} 

Working example

Answer 2

При выборе одного элемента вам просто нужно скрыть все из них заранее.

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

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function() { 
     hideAll(); 

     this.classList.toggle("active"); 
     this.nextElementSibling.classList.toggle("show"); 
    } 
} 

function hideAll() { 
    for (i = 0; i < acc.length; i++) { 
     acc[i].classList.toggle("active", false); 
     acc[i].nextElementSibling.classList.toggle("show", false); 
    } 
} 

Answer 3

вы должны покрыть панель с гармошкой, так что вы можете легко сделать это.

см это

html 
<div class="accordion"><b>Heading 1</b> 
    <div class="panel"> 
     <p class="text-light">Text 1</p> 
    </div> 
    </div> 
<div class="accordion"><b>Heading 2</b> 
    <div class="panel"> 
     <p class="text-light">Text 2</p> 
    </div> 
    </div> 

jquery: 
$('.accordion').click(function() { 
$(this).find('.panel').show(); 
$(this).siblings().find('.panel').hide(); 

}); 

Working example

Answer 4

var acc = document.getElementsByClassName("accordion"); 
var i; 
var last; 
for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function() { 
     if(last){ 
      last.classList.toggle("active",false); 
      last.nextElementSibling.classList.toggle("show",false); 
     } 
     this.classList.toggle("active"); 
     this.nextElementSibling.classList.toggle("show"); 
     last=this; 
    } 
} 

переменной последняя будет отслеживать последний активный аккордеоне, так что вам не нужно повторять каждый аккордеоне и панель снова.