How to toggle menu visibility

Question

I am trying to code a burger menu that will change symbol from "-" to "x" on click and also show menu.

I'm done with the first part. The symbol is changed / toggled on click but I can't figure out how to display the menu.

This is working code I have

const menuButton = document.querySelector(".menu-button");

let showMenu = false;
menuButton.addEventListener("click", toggolmenu);

//function
function toggolmenu() {
  if (!showMenu) {
    menuButton.classList.add("close");
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
    showMenu = false;
  }
}

What I need to do is that when you click on ".menu-button" it will change from this:

<div class="menu-body">...</div>

to this:

<div class="menu-body show-menu-body">...</div>

Any ideas? Thank you in advance for your time

Answer 1

Similar to what you already have, toggle a class to the Menu element too:

const menuButton = document.querySelector(".menu-button");
const menu       = document.querySelector(".menu-body");

let showMenu = false;
menuButton.addEventListener("click", toggolmenu);

//function
function toggolmenu() {
  if (!showMenu) {
    menuButton.classList.add("close");
    menu.classList.add("show-menu-body");
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
     menu.classList.remove("show-menu-body");
    showMenu = false;
  }
}

or this way using Element.classList.toggle() :

const menuButton = document.querySelector(".menu-button");
const menu       = document.querySelector(".menu-body");
let showMenu = false;
menuButton.addEventListener("click", toggolmenu);

function toggolmenu() {
  showMenu = !showMenu;
  menuButton.classList.toggle("close", showMenu);
  menu.classList.toggle("show-menu-body", showMenu);
}

---

Control state using a hidden checkbox

Here's an example without JavaScript at all, just a checkbox and CSS :checked pseudo.
To than target and style the next elements use the General Sibling Combinator selector ~

 /* QuickReset */ * {margin:0; box-sizing:border-box;} #menu-toggler { position: absolute; opacity: 0; } #menu-btn { position: fixed; z-index: 101; padding: 10px; font-size: 2em; cursor: pointer; } #menu-btn:before { content: "\2630"; } #menu { position: fixed; z-index: 100; top:0; bottom: 0; left: 0; min-width: 200px; transition: 0.5s; transform: translateX(-100%); padding-top: 4em; background: #f48024; } /* CHECKED STATES */ #menu-toggler:checked ~ #menu-btn:before { content: "\2715"; } #menu-toggler:checked ~ #menu { transform: translateX(0); }

 <input id="menu-toggler" aria-controls="menu" type="checkbox"> <label id="menu-btn" for="menu-toggler" aria-controls="menu-tog" aria-label="Toggle Menu"></label> <nav id="menu"> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul> </nav>

Answer 2

let me know if this works. :)

const menuButton = document.querySelector(".menu-button");
const menuBody = document.querySelector(".menu-body"); // grab the menu element

let showMenu = false;
menuButton.addEventListener("click", toggolmenu);

//function
function toggolmenu() {
  if (!showMenu) {
    menuButton.classList.add("close");
    menuBody.classList.remove("show-menu-body");  // when menu is closed we remove the class
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
    menuBody.classList.add("show-menu-body"); // when menu is open we add the class
    showMenu = false;
  }
}

Answer 3

Try this:

const menuButton = document.querySelector(".menu-button");
const menuBody = document.querySelector(".menu-body");

let showMenu = false;

function toggleMenu() {
  if (showMenu === false) {
    menuButton.classList.add("close");
    menuBody.classList.add("show-menu-body");
    showMenu = true;
  } else {
    menuButton.classList.remove("close");
    menuBody.classList.remove("show-menu-body");
    showMenu = false;
  }
}

menuButton.addEventListener("click", toggleMenu);

Of course, .show-menu-body must have something like display: block; to override a .menu-body with display: none; . I followed your path, but you have several options to achieve this (and also add CSS transitions to improve the switch).

.menu-body {
  display: none;
}

.show-menu-body {
  display: block;
}

Answer 4

you will need to get that element by ID and then add class to it like this

document.getElementById("MyElement").classList.add('show-menu-body');

For this code to work you will need to add ID to that div. But it must be unique.