When I interact with the close/open buttons, a specific div either hides or shows on the page.
I have a requirement where if the div is hidden and I resize my browser window to be greater than 767px in width, the div should automatically show again.
To test this functionality, first decrease your browser size, hide the div by clicking "close", then increase the browser size. The div should reappear automatically, but currently it does not.
How can I make this work as intended?
/* Function to display the side navigation when open button is clicked */
function openNav() {
document.getElementById("demo").style.display = "block";
}
/* Function to hide the side navigation when close button is clicked */
function closeNav() {
document.getElementById("demo").style.display = "none";
}#demo{
display:block;
}
@media screen and (max-width: 767px) {
#demo {
display: none;
}
}<div id="demo">Hello</div>
<span onclick="openNav()">Open</span>
<span onclick="closeNav()">Close</span>