title: Toggle pop up on button click
body: <p>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.</p>
  <p>Here's my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let menuOpen = false;
  menuBtn.addEventListener('click', () =&gt; {
    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");
      });
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="popup"&gt;
              &lt;nav id="main-nav"&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Über uns&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Galerie&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/nav&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>