что делаю не так?
Всё делаете не так.
Зачем переключаете класс
active
на кнопке? Его у элемента с классом
d-n
переключать надо - вместо той ерунды с изменением стилей напрямую. Кстати, а кому вы пытаетесь назначить
style.display = 'table-cell'
? Если идти от кнопки parent-parent-next (вместо того, чтобы несколько раз дёргать parentNode, следует использовать метод closest) - это будет (не будет, погуглите, в чём разница между
nextSibling
и
nextElementSibling
) строка, а не ячейка - так что перенесите-ка класс
d-n
на один уровень выше. Зачем создавать каждой кнопке индивидуальный обработчик? Достаточно одного на всех, создавайте его вне цикла. Наконец, у
classList.toggle
есть второй параметр, не надо им пренебрегать.
Исправляем:
document.querySelectorAll('.panel').forEach(n => n.addEventListener('click', onClick));
function onClick() {
const panel = this.closest('tr').nextElementSibling;
const isActive = !panel.classList.contains('active');
panel.classList.toggle('active', isActive);
this.classList.toggle('changing-icon', isActive);
}