Как сделать первые элементы активными?

Question

[an]

Есть скрипт faq аккордеона
вот

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

есть код

<div class="item">
     <button class="accordion">Lorem ipsum ?</button>
     <div class="panel">
          Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem 
           ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
     </div>
</div>
<div class="item">
     <button class="accordion">Lorem ipsum ?</button>
     <div class="panel">
          Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem 
           ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
     </div>
</div>
<div class="item">
     <button class="accordion">Lorem ipsum ?</button>
     <div class="panel">
          Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem 
           ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
     </div>
</div>
<div class="item">
     <button class="accordion">Lorem ipsum ?</button>
     <div class="panel">
          Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem 
           ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
     </div>
</div>

ПРи клике классу accordion подставляется класс active и разворачивается панель

необходимо что бы по дефолту первый item faq был развернут
нужно как то на js это сделать
т.к html выводится циклом

Answer 1

[Чипекве]

const accordionButtons = document.querySelectorAll('.accordion');

accordionButtons.forEach(button => {  
  button.addEventListener('click', switchAccordion);
});

function switchAccordion({target}) {  
  target.classList.toggle('active');
  const panel = target.nextElementSibling;
  panel.style.maxHeight = (panel.style.maxHeight) ? null : panel.scrollHeight + 'px';
}

switchAccordion({target: accordionButtons[0]});

или добавить

if (i === 0) {
    acc[i].click();
}

в тот код после навешивания обработчика

Comments

[an]

Спасибо большое!