I'm trying to show/hide a drop down menu when hamburger icon is clicked by user.

Class .show is toggled on #dropdown-content when user clicks on #hamburger-icon. Toggling .show is done to show/hide #dropdown-content.

Please refer to jsfiddle: /

Relevant JS code is:

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("hamburger-icon").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
  document.getElementById("dropdown-content").classList.toggle("show");
}

I expect when hamburger icon is clicked by user, links inside #dropdown-content will be visible if it was hidden, and hidden if it was visible. But #dropdown-content is not made visible/invisible when user clicks on the hamburger icon.

I'm trying to show/hide a drop down menu when hamburger icon is clicked by user.

Class .show is toggled on #dropdown-content when user clicks on #hamburger-icon. Toggling .show is done to show/hide #dropdown-content.

Please refer to jsfiddle: https://jsfiddle/d8oubjmk/1/

Relevant JS code is:

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("hamburger-icon").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
  document.getElementById("dropdown-content").classList.toggle("show");
}

I expect when hamburger icon is clicked by user, links inside #dropdown-content will be visible if it was hidden, and hidden if it was visible. But #dropdown-content is not made visible/invisible when user clicks on the hamburger icon.

• javascript
• html
• css

• Possible duplicate of show/hide drop down – moinmaroofi Commented Feb 4, 2019 at 7:50

1 Answer 1

You're missing just 2 things:

Wrap your JS code in window.onload to ensure the DOM elements are actually loaded before you attempt to select them.

window.onload = () => {
  // Get the button, and when the user clicks on it, execute myFunction
  document.getElementById("hamburger-icon").onclick = function() {myFunction()};

  /* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
  function myFunction() {
    document.getElementById("dropdown-content").classList.toggle("show");
  }
}

Your .show class needs to be more specific otherwise it loses specificity to the #dropdown-content and has no effect.

/* Applies to elements that have id="dropdown-content" and class="show" */

#dropdown-content.show 
{
  display: block;
}

Here's your code working:

window.onload = () => {
  // Get the button, and when the user clicks on it, execute myFunction
  document.getElementById("hamburger-icon").onclick = function() {myFunction()};

  /* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
  function myFunction() {
    document.getElementById("dropdown-content").classList.toggle("show");
  }
}

#dropdown-content a
{
  text-decoration:none;
  display:block;  
}

#dropdown-content {
  display: none;
}

#dropdown-content.show
{
  display: block;
}

<div id="top-menu">
  <div id="hamburger-icon">&#9776;</div>
  <div id="dropdown-content" class="show-hide-menu">
    <a href="#">Home</a>
    <a href="#">Menu1</a>
    <a href="#">Menu2</a>
    <a href="#">Menu3</a>
    <a href="#">About Us</a>
  </div>
</div>