Складной не расширяется

Question

У меня есть кнопка, содержащая div с содержимым. При нажатии на div я хочу, чтобы свернутый контент расширялся. При наведении курсора на элемент div он меняет цвет, а указатель меняется, как мне нравится. Однако при нажатии ничего не происходит: свернутый контент не расширяется. Что не так с моим кодом?

var coll = document.getElementsByClassName("contents");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var collapse = this.nextElementSibling;
    if (collapse.style.display === "block") {
      collapse.style.display = "none";
    } else {
      collapse.style.display = "block";
    }
  });
}

<div class="results">

  <button type="button" class="contents">
          <div class="info">
            ...
          </div>
          </button>
  <div class="collapse">
    <p>Text only shown when expanding</p>
  </div>

</div>

Answer 1

Ладно ... Это сработало, когда я ставил тег script в конец, а не в раздел head!

Answer 2

Лучше использовать jQuery в качестве клиентской среды для повышения производительности, кросс-браузерности и уменьшения количества строк кода.

Вы можете использовать $('.collapse').slideToggle() функция для вашего проекта. Документация