External javascript for collapsible menu not running on website-CodePudding

So basically, I've got some javascript that I (literally) ripped directly from w3.

It's meant to be a clickable menu that opens up and displays check boxes, however, it's not actually opening when I load the webpage. It works perfectly fine within their own editor, and oxygen isn't spitting any errors out at me, so I'm at a bit of a loss.

Below is a snippet of my HTML.

<body>
    <h1>Title</h1>
        <button type="button" >Content Header</button>
        <div >
            <label >Content<input type="checkbox" checked="checked" />
                <span ></span><br />
            </label>
        </div>
</body>

and here's the javascript for the collapsible menu (that isn't working)

var coll = document.getElementsByClassName("collapsible");
var i;

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

CodePudding user response：

Placed the at the bottom of the document within the tags, it started magically working. Thanks @aerial301

CodePudding user response：

I don't see a problem in your javascript code either.
Have you tried to wrap your code in the document.onload(function) event?
Example:

<script>
    document.onload(() => {
        // your javascript code here.
    })
</script>