Как написать нормальной функцией?

Question

[Smirator]

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

document.getElementById('panel-one').onclick = function() {
  document.getElementById('panel-one').classList.toggle('active');
  if(document.getElementById('panel-one').classList.contains('active')){
    document.getElementById('panel-one').classList.add('changing-icon');
  } else {
    document.getElementById('panel-one').classList.remove('changing-icon');
  }
}

document.getElementById('panel-two').onclick = function() {
  document.getElementById('panel-two').classList.toggle('active');
  if(document.getElementById('panel-two').classList.contains('active')){
    document.getElementById('panel-two').classList.add('changing-icon');
  } else {
    document.getElementById('panel-two').classList.remove('changing-icon');
  }
}

Answer 1

[Radiks Alijevs]

Привет, да с id это не правильно, так как можно забыть и про дублировать одинаковые id. Можно попробовать через loop, что-то вроде этого:

const panels = document.getElementsByClassName("panel");
const i;

for (i = 0; i < panels.length; i++) {
  panels[i].addEventListener("click", function() {
   // тут ещё можно поставить удаление у всех акордионов класса 'active', если необходимо
    this.classList.toggle("active");
    const panel = this.nextElementSibling;
    if(this.classList.contains('active')){
         this.classList.add('changing-icon');
    } else {
       this.classList.remove('changing-icon');
    }
   if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

<button class="panel">Аккордеон 1</button>
<div class="panel-body">
  <p>текст аккордеона</p>
</div>

Answer 2

[Rsa97]

Меняете все id на общий класс panel и используете всплытие событий. Вместо документа можно повесить обработчик на любого общего родителя.

document.addEventListener(
  'click', 
  (e) => {
    // const classes = e.target.classList;
    const classes = e.target.closest('.panel')?.classList;
    if (!classes?.contains('panel')) {
      return;
    }
    classes.toggle('active');
    classes.toggle('changing-icon', classes.contains('active'));
  }
);

Comments

[Radiks Alijevs]

В вашем случае, если внутри контейнера panel будет ещё несколько элементов (panel-body, panel-head), то при клике на контейнер e.target.classList может быть равен panel-body или panel-head и у вас не будет работать аккордеон

[Rsa97]

Radiks Alijevs, Да, вы правы. Поменял код.