На самом деле существует гораздо более простой способ перебора элементов DOM, а также сделать код более понятным.
Рабочий пример
Требуются правки. HTML и CSS - это очень маленькие корректировки, интересная часть JS.
HTML
<div class="collapsible">
<header>
Open Section 1
</header>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
...
Разум
Если ваши кнопки для открытия и закрытия складных объектов далекоВ отличие от фактического содержимого (что не так, как вы упомянули здесь), семантически полезно, чтобы весь элемент был сгруппирован вместе.
CSS
.collapsible header {
...
}
.collapsible.is-active .content {
display: block;
}
Reasoning
Единственное изменение, которое требуется здесь, - это настройка CSS для целевого элемента header, поскольку класс .collapsible теперь применяется к родительскому элементу.
Кроме того, мы добавляем простой семантический класс, который сообщит нам, какойодин в данный момент активен, и покажите его.
JS
const collapsibles = Array.from(document.getElementsByClassName("collapsible"));
function toggleVisibility(e) {
const parent = e.target.parentElement;
parent.classList.toggle("is-active");
collapsibles.forEach(collapsible => {
if(collapsible === parent) return;
collapsible.classList.remove("is-active")
});
}
collapsibles.forEach(collapsible => {
collapsible.querySelector("header").addEventListener("click", toggleVisibility);
});
Обоснование
- Сначала вы получаете массив родительских элементов DOM и сохраняете их в переменной,Вы будете использовать это, чтобы решить, какой из них показывать, а какой скрывать.
- К каждому из этих элементов DOM вы присоединяете прослушиватель событий, используя более простые и удобочитаемые методы Array вместо
for loop. - Вы превращаете ваш обработчик в простую функцию, которую можете использовать повторно. Все, что делает эта функция, это убедитесь, что вы
toggle текущий активный, если вы нажмете на себя, и закройте все остальные.