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>

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

  1. You need to compare the value, but not assign. Therefore, you should use === instead of =

    menuBtn.addEventListener('click',() => {
    console.log("hi");
    if (menuOption.style.display === "none") {  //this should use compare
        menuOption.style.display = "initial"
    } else {
        menuOption.style.display = "none"
    }
});
    Reply 
  2. const btn = document.getElementById("btn");
const square = document.getElementById("square");


btn.addEventListener("click", ()=> square.classList.toggle("hide"));
    div {
  width: 200px;
  height: 200px;
  background-color: red;
}

.hide {
  display: none
}
    <button id="btn">Click me!</button>
<div class="hide" id="square"></div>
    Reply

  3. the correct way to do that :

    const menuBtn = document.querySelector("#menu-button")
menuBtn.addEventListener('click',() => menuBtn.classList.toggle('noMenu'))
    #menu-button {
  margin           : auto;
  background-color : transparent;
  outline          : none;
  border           : none;
  }
#menu-button.noMenu  > div.menu-options { 
  display : none;
  }
.menu-options {
  position         : absolute;
  background-color : khaki;
  height           : 100px;
  width            : 30px;
  }
    <div id="menu-button" class="noMenu">
  hi
  <div class="menu-options">
    <ul>
      <li> home      </li>
      <li> about     </li>
      <li> portfolio </li>
    </ul>
  </div>
</div>
    Reply

Leave a Comment