Javascript, HTML и CSS: что я делаю не так?

Question

Я пытаюсь создать несколько сворачиваемых разделов на веб-странице, и мне кажется, что я что-то делаю неправильно в коде Javascript, который я использую. Я относительно новичок в разработке пользовательских веб-страниц, и я пробовал все, что мог придумать, чтобы заставить это работать. Я просто не могу заставить кнопку отображать контент, когда я нажимаю на нее.

Я ценю любую помощь, которую вы все можете предоставить.

.collapsiblecontent {
  display: none;
  overflow: hidden;
  background-color: #f1f1f1; 
}

.collapsible button.collapsible {
  background-color: #00000000;
  border: 0;
  color: #00000000;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
    font-family: 'Montserrat',Arial,Helvetica,sans-serif;
    font-size: 120%;
}

.active, .collapsible:hover button.collapsible {
  background-color: #ccc;
}

<div class="layout">
<script type="text/javascript">// <![CDATA[
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var collapsiblecontent = this.nextElementSibling;
    if (collapsiblecontent.style.display === "block") {
      collapsiblecontent.style.display = "none";
    } else {
      collapsiblecontent.style.display = "block";
    }
  });
}/
// ]]></script>
<h2><strong>Heading</strong></h2>
<div class="content" style="font-size: 110%;"><button type="button" class="collapsible">Button 1:</button>
<div class="collapsiblecontent">
<p>Content Example 1.</p>
</div>
<button type="button" class="collapsible">Button 2:</button>
<div class="collapsiblecontent">
<p>Content Example 2.</p>
</div>
<button type="button" class="collapsible">Button 3:</button>
<div class="collapsiblecontent">
<p>Content Example 3.</p>
</div>
<button type="button" class="collapsible">Button 4:</button>
<div class="collapsiblecontent">
<p>Content Example 4</p>
</div>
</div>
</div>