I have a div I want to be hidden until a button is clicked, and when the button is clicked again their after, hide the div again. When I click it the first time to show the div it works, but the display wont hide again. I know the button works more than once because my console.log("hi") logs on every click.
let menuBtn = document.querySelector("#menu-button");
let menuOption = document.querySelector(".menu-options");
menuOption.style.display = "none";
menuBtn.addEventListener('click',() => {
console.log("hi");
if (menuOption.style.display = "none") {
menuOption.style.display = "initial"
} else {
menuOption.style.display = "none"
}
});
#menu-button {
margin: auto;
background-color:transparent;
outline: none;
border: none;
}
.menu-options {
position: absolute;
background-color: khaki;
height: 100px;
width: 30px;
}
<button type="button" id="menu-button">
hi
<div class="menu-options">
<ul>
<li>
home
</li>
<li>
about
</li>
<li>
portfolio
</li>
</ul>
</div>
</button>
You need to compare the value, but not assign. Therefore, you should use
===
instead of=
the correct way to do that :