Toggling display on button click works on first click but wont make display hidden again

by

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>

48 thoughts on “Toggling display on button click works on first click but wont make display hidden again”

Leave a Comment