Javascript-форум - Несколько collapse элементов на странице

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Несколько collapse элементов на странице (https://javascript.ru/forum/dom-window/77660-neskolko-collapse-ehlementov-na-stranice.html)

Несколько collapse элементов на странице

Условно. Есть на странице несколько таких элементов

<button class="bab">Кнопка</button>
<div class="box" style="display: none"> Содержимое </div>

<button class="bab">Кнопка</button>
<div class="box" style="display: none"> Содержимое 2</div>

И есть java скрипт который должен скрывать и показывать элемент. Однако он не работает. Помогите найти ошибку.

<script>
let coll = document.getElementsByClassName("bab");
	for (i = 0; i < coll.length; i++;) {
coll[i].addEventListener('click', function() {
let box = this.nextElementSibling;
if (box.style.display == "none"){
box.style.display = "block";
	}	else{
box.style.display = "none";
}
})
}
</script>

Вы написали лишнюю точку с запятой!

<button class="bab">Кнопка</button>
<div class="box" style="display: none"> Содержимое </div>

<button class="bab">Кнопка</button>
<div class="box" style="display: none"> Содержимое 2</div>

<script>

let coll = document.getElementsByClassName("bab");
for (i = 0; i < coll.length; i++) {
	coll[i].addEventListener("click", function() {
		let box = this.nextElementSibling;
		if (box.style.display == "none") {
			box.style.display = "block";
		} else {
			box.style.display = "none";
		}
	});
}

</script>

Ваше решение не учитывает то, что могут быть удалены или добавлены элементы!

Вот учитывает...

<button class="bab">Кнопка</button>
<div class="box" hidden> Содержимое </div>

<button class="bab">Кнопка</button>
<div class="box" hidden> Содержимое 2</div>

<script>

addEventListener("click", function(event) {
	if (!event.target.matches(".bab")) return;

	const box = event.target.nextElementSibling;
	box.hidden ^= true;
});

</script>

Также можно использовать элемент summary...

<details>
	<summary class="bab">Кнопка</summary>
	<div class="box"> Содержимое </div>
</details>

<details>
	<summary class="bab">Кнопка</summary>
	<div class="box"> Содержимое 02</div>
</details>

Огромное спасибо. Ваше решение действительно лучшее

Добрый вечер использую предложенный вами вариант.

<button class="bab">Кнопка</button>
<div class="box" hidden> Содержимое </div>

<button class="bab">Кнопка</button>
<div class="box" hidden> Содержимое 2</div>

<script>

addEventListener("click", function(event) {
	if (!event.target.matches(".bab")) return;

	const box = event.target.nextElementSibling;
	box.hidden ^= true;
});

</script>

И столкнулся с следующей проблемой. Изредка кнопка не работает. Наблюдается корреляция с количеством кнопок. Примерно это выглядит вот так - https://www.youtube.com/watch?v=zbqH...ature=youtu.be

В теме где мало кнопок все хорошо, где много они уже не работают.
Никаких ошибок в консоле на замечено, однако hidden упорно отказывается убираться, в чем может быть причина?

Цитата:

Сообщение от ArtiOnMoon

И столкнулся с следующей проблемой. Изредка кнопка не работает. Наблюдается корреляция с количеством кнопок. Примерно это выглядит вот так

Я заметил, что у вас (в видео подглядел) мой скрипт обернут в DOMContentLoaded, это не нужно. Также проследите, чтобы только один раз этот скрипт был вставлен на страницу. (Если у вас генерируется шаблон на сервере, то вы могли это упустить) Элементов может быть сколько угодно, но скрипт должен быть только один. Чтобы не путаться вынесите этот скрипт в <head>

Скрипт должен быть только один на странице! (лучше в <head>)

<script>

addEventListener("click", function(event) {
	if (!event.target.matches(".bab")) return;

	const box = event.target.nextElementSibling;
	box.hidden ^= true;
});

</script>

Элементов, которыми он будет управлять может быть много (идут где-то в <body>)

<button class="bab">Кнопка</button>
<div class="box" hidden> Содержимое </div>

<button class="bab">Кнопка</button>
<div class="box" hidden> Содержимое 2</div>

Если у вас скрипт добавлен два раза, то при нажатии на кнопку первый откроет содержимое (поскольку оно было скрыто), а второй его тут же закроет (поскольку оно на этот момент было открыто). В итоге это будет выглядеть как будто не открылось.