[Malleys]

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

<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>