2021-12-09

Tech Programing

程式人小天地

External javascript for collapsible menu not running on website

1 min read


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" class="collapsible">Content Header</button>
        <div class="content">
            <label class="container">Content<input type="checkbox" checked="checked" />
                <span class="checkmark"></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";
    }
  });
}



Source link

資料來源:Stackoverflow

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *