My issue is that the collapsible menu I have created does not remain closed when the page is refreshed. Upon reloading the page, the collapsible menu is always fully expanded, even if it was collapsed before the refresh. This creates a problem as there is a large amount of content within this collapsible section.
Below is the basic code for the menu:
CSS:
//some CSS code here for styling, background color, etc.,
// .active is the key class
.active, .collapsible:hover{
background-color: #02538D;
}
HTML:
<button class="collapsible">Tutorials</button>
<div>
<div class="content">
<p>
<?php
//some PHP code here to output collapsible content
?>
</p>
</div>
<div class="content">
<p>
<?php>
//some PHP code here to output collapsible content
?>
</p>
</div>
</div>
JavaScript:
<script>
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>
I am new to JavaScript and suspect the issue lies in my script. Any help or guidance would be greatly appreciated. Thank you!