title: How to toggle between display:none and display:block
body: <p>Responsive menu</p>
  
  <p>I've got a navigation menu that holds 4 elements. One of them is not displayed (display:none). When you resize a window to 700px navigation menu appears and 3 other elements become hidden.
  When you click on "Menu" JQuery selects all hidden elements and display them as block elements. But when you click on "Menu" second time nothing happens.
  Can't figure out how to fix JQuery code. Can anyone help?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="topnav"&gt;
      &lt;a href="javascript:void(0);" onclick="myFunction()"&gt;&lt;li class="menu"&gt;Menu&lt;/li&gt;&lt;/a&gt;
      &lt;li&gt;test 1&lt;/li&gt;
      &lt;li&gt;test 2&lt;/li&gt;
      &lt;li&gt;test 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .topnav {
          max-width: 900px;
          margin: 0 auto;
          text-align: center;
      }
  
      .topnav li {
          display: inline-block;
          padding: 10px;
      }
  
      li.menu {
          display: none;
      }
  
  @media screen and (max-width:700px) {
  
      .topnav li {
          display: none;
      }
  
      li.menu {
          display: block;
      }   
  }
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>function myFunction() {
  
          if($("ul.topnav li:hidden")) {
              $("ul.topnav li:hidden").css("display", "block");
          }
          else  {
              $("ul.topnav li:not(:first-child)").css("display", "none");
          }
  
      }
  </code></pre>