Just starting out with HTML and CSS, so please be patient with me.
I have a header div that contains a nav div, which in turn contains a li div. I attempted to create a button that would hide the entire header. While I managed to hide the header, the nav and li divs remain visible.
Here are the CSS properties used:
#header {
z-index: 100;
left:0;
top: 0px;
height: 60px;
transition: max-height 0.2s ease-out;
width: 100%;
position: fixed;
nav {
max-width: 650px;
margin: 0 auto;
padding: 0 10px;
li {
font-family: 'OpenSansLight', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
list-style: none;
display: inline;
color: white;
line-height: 50px;
}
}
}
The code above is from a Jekyll scss file that generates corresponding css. The JavaScript function used is as follows:
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var content = this.nextElementSibling;
console.log(content.innerHTML);
if (content.style.height){
content.style.height = null;
} else {
content.style.height = content.scrollHeight + "px";
}
});
}
Thank you.