Почему в аккордеоне происходит скачек(открывает первый блок, затем все остальные разом)?

Question

[Александр AS]

Почему в аккордеоне по клику на кнопку происходит скачек?
А конкретнее, по дефолту открыт один блок, и при клике на кнопку аккордеон закрывает дефолтный блок и открывает все сразу блоки, а не поочередно, как и работает аккордеон.

Скрипт аккордеона

Answer 1

[0xD34F]

Во-первых, nextStep.nextElementSibling - это никакой не блок аккордеона. Во-вторых, условие кривое - открываете блок, если он не следующий (!==) и закрыт, т.е., открываете все, кроме закрываемого.

document.addEventListener('click', e => {
  const t = e.target;
  const heading = t.closest('.panel-heading');
  const nextStep = t.closest('.construct-btn');
  const collapse = 
    heading  ? heading.nextElementSibling :
    nextStep ? t.closest('.panel').nextElementSibling.querySelector('.panel-collapse') :
               null;

  if (collapse) {
    e.preventDefault();
    t.closest('.panel-group').querySelectorAll('.panel-collapse').forEach(n => {
      n.classList[n === collapse ? 'toggle' : 'remove']('in');
    });
  }
});

Comments

[Александр AS]

0xD34F, подскажите пожалуйста, почему скрипт выдает ошибку при клике на button(4-й пункт аккордеона - Получить расчет и скидку) -

Uncaught TypeError: Cannot read property 'querySelector' of null

[0xD34F]

Александр AS, потому что он последний, нет никакого nextElementSibling - а есть попытка выполнить querySelector.