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";
}
});
}
<script>
tag that links your external js file? If yes then either place it at the bottom or just adddefer
to it. Also, try adding someconsole.log()
s to see if the file is actually linked properly and see if anything is getting stored incoll
.