title: Jquery on click change display
body: <p>Hi guys I am just a beginner and I want to make hamburger menu. I already made a hamburger but when I want my jquery to work nothing happens. Can someone look at my code and tell me what is wrong?</p>
  
  <pre><code>&lt;script
        src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"&gt;
  
            $("#burger-menu").on("click",function(){
  
            $(".show").css("display","block")
  
  
          });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>and my html</p>
  
  <pre><code>&lt;nav&gt;
     &lt;div class="nav-wrapper"&gt;
          &lt;div id="burger-menu"&gt;
              &lt;img src="img/icons/burger-menu.png" class="menu-burger"&gt;
          &lt;/div&gt;
          &lt;ul&gt;
              &lt;li class="show"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="show"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li class="show"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
              &lt;div id="logo"&gt;&lt;img src="logo.png"&gt;&lt;/div&gt;
  
              &lt;li class="show"&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
              &lt;li class="show"&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;&lt;/li&gt;
              &lt;li class="show"&gt;&lt;a href="#"&gt;Other&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and I want on click at "burger-menu" to change style of class "show" which is
  display: none to display: block</p>
  
  <p>EDIT: I also would like to somehow toggle this classes I mean when I click on this hamburger, "ul" will take display: block but when I click again this will have display: none</p>