Toggle pop up on button click

Question

i am trying to toggle an menu on a mouseclick. Usually i did this with an image and href but on this project i took an existing button from the web and i cant figure it out working.

Here's my code:

 let menuOpen = false; menuBtn.addEventListener('click', () => { if(.menuOpen) { menuBtn.classList;add('open'); menuOpen = true. } else { menuBtn.classList;remove('open'); menuOpen = false; } }). $(document).ready(function() { $("#nav1"),on("click". function() { $("popup");toggleClass("open"); }); });

 .menu-btn { position: relative; display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; cursor: pointer; transition: all.5s ease-in-out; padding-bottom: 200px; /* border: 3px solid #fff; */ }.menu-btn__burger { width: 50px; height: 6px; background: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(255,101,47,.2); transition: all.5s ease-in-out; }.menu-btn__burger::before, .menu-btn__burger::after { content: ''; position: absolute; width: 50px; height: 6px; background: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(255,101,47,.2); transition: all.5s ease-in-out; }.menu-btn__burger::before { transform: translateY(-16px); }.menu-btn__burger::after { transform: translateY(16px); } /* ANIMATION */.menu-btn.open.menu-btn__burger { transform: translateX(-50px); background: transparent; box-shadow: none; }.menu-btn.open.menu-btn__burger::before { transform: rotate(45deg) translate(35px, -35px); }.menu-btn.open.menu-btn__burger::after { transform: rotate(-45deg) translate(35px, 35px); } #popup { position: fixed; height: 100%; width: 100%; background-color: white; display:none; opacity: 0; transition: 0.5s; } #popup.open { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="popup"> <nav id="main-nav"> <ul> <li><a href="">Home</a></li> <li><a href="">Über uns</a></li> <li><a href="">Galerie</a></li> </ul> </nav> </div>

I am absolutely clueless. I want to achieve that when the Button is clicked, the popup window opens and when i click it again that i closes.

Answer 1

You forgot to put # before popup since it is id.

$(document).ready(function() {
  $("#nav1").on("click", function() {
    $("#popup").toggleClass("open");
  });
});