burger doesn't work after toggling the navbar

Question

I set opacity 0 to enable my navbar navbar javascript

This is how it looks in css :

.nav-open {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 24vh;
  background: #ffafaf;
  display: flex;
  align-items: center;
  justify-content: space-around;
  opacity: 0;
  transition: 1s ease-in-out;
}

This is the javascript code:

const navBar = () => {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-open");

  burger.addEventListener("click", () => {
    nav.style.opacity = 1;
  });
};

navBar();

So, when I toggle it, it looks like this . The thing is that i can't toggle it back (I toggle it but it does not toggle back) how can I fix it?

Here is the HTML code in case you need it:

<nav>
      <div class="logo">
        <h1>iCosmetics</h1>
      </div>
      <div class="burger">
        <svg
          class="menu"
          width="30"
          height="16"
          viewBox="0 0 30 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <line
            x1="15"
            y1="15"
            x2="30"
            y2="15"
            stroke="black"
            stroke-width="2"
          />
          <line x1="10" y1="8" x2="30" y2="8" stroke="black" stroke-width="2" />
          <line y1="1" x2="30" y2="1" stroke="black" stroke-width="2" />
        </svg>
      </div>
      <div class="nav-open">
        <div class="contact">
          <h2>Contact</h2>
          <p>3108248125</p>
        </div>
        <div class="social">
          <h2>Social</h2>
          <i class="fab fa-instagram"></i>
          <i class="fab fa-twitter"></i>
        </div>
      </div>
    </nav>

Answer 1

You can add sub-class for actually showing the content and toggle this class on click:

 document.querySelectorAll(".burger")[0].addEventListener("click", () => { document.querySelectorAll(".nav-open")[0].classList.toggle('isOpen'); });

 .nav-open { position: absolute; width: 100%; top: 0; left: 0; height: 24vh; background: #ffafaf; display: flex; align-items: center; justify-content: space-around; opacity: 0; transition: 1s ease-in-out; } .nav-open.isOpen { opacity: 1;}

 <nav> <div class="logo"> <h1>iCosmetics</h1> </div> <div class="burger"> <svg class="menu" width="30" height="16" viewBox="0 0 30 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <line x1="15" y1="15" x2="30" y2="15" stroke="black" stroke-width="2" /> <line x1="10" y1="8" x2="30" y2="8" stroke="black" stroke-width="2" /> <line y1="1" x2="30" y2="1" stroke="black" stroke-width="2" /> </svg> </div> <div class="nav-open"> <div class="contact"> <h2>Contact</h2> <p>3108248125</p> </div> <div class="social"> <h2>Social</h2> <i class="fab fa-instagram"></i> <i class="fab fa-twitter"></i> </div> </div> </nav>

You can learn much more here .

Enjoy code!