Закрытие аккордеона при клике на другой

Question

Есть такой од аккордиона. При повторном клике на элемент - он закрывается, всё в порядке. Как сделать чтобы при клике на другой аккордеон предыдущий закрылся?

const accordion = document.getElementsByClassName('btn_accordion');

    for (i = 0; i < accordion.length; i++) {
        accordion[i].addEventListener('click', function() {
            console.log('fefef')
            this.nextElementSibling.classList.toggle('accordion_active')
            this.classList.toggle('btn_accordion_active')
            this.lastElementChild.firstElementChild.classList.toggle('icon_arrow_active')
            this.lastElementChild.classList.toggle('icon_accordion_active')
        }   
        )
        }

Answer 1

Нужно проверять открыт ли аккордеон,по которому тыкнули. Если открыт - закрываете. Если закрыт - закрываете ВСЕ аккордеоны, и открываете тот, на который ткнули.

let acc = document.querySelectorAll('.accordion');

acc.forEach(item => {
    item.addEventListener('click', e => {
    if (e.target.classList.contains('active')) {
        e.target.classList.remove('active');
      return;
    }
    acc.forEach(e=>e.classList.remove('active'));
    e.target.classList.add('active');
  });
});

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc;
}

.panel {
    padding: 0 18px;
    background-color: white;    
    overflow: hidden;
    height: 0;
    transition: 0.4s;
}

.accordion.active + .panel { 
    height: 50px;    
}

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

БЛОГ НА HUSL

Закрытие аккордеона при клике на другой

Ответы (1 шт):