title: After click, reverse animation on jQuery (Show/Hide)
body: <p>I'm trying to use the:</p>
  
  <pre><code>$(document).ready(function() {
      $('#showmenu1').click(function() {
              $('.menu1').slideDown("slow");
      });
  });
  </code></pre>
  
  <p>Effect in jQuery to make a div appear when a trigger is clicked, which it does very successfully. However I want the animation to reverse to make the div disappear, when that same trigger is clicked again. The effect I want to make is:</p>
  
  <pre><code>$(document).ready(function() {
      $('#showmenu1').click(function() {
              $('.menu1').slideUp("slow");
      });
  });
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>HTML Example:</p>
  
  <pre><code>&lt;section id="showmenu1" style="background-color:#09F; color:#fff"&gt;
      &lt;h1&gt;Show Div&lt;/h1&gt;
  &lt;/section&gt;
  &lt;div class="menu1" style="display: none; background-color:#09F; color:#fff; padding:0; margin:0"&gt;
      &lt;ul style="padding:0px; margin:0px; position: relative; text-align: center;"&gt;
          &lt;li&gt;
              &lt;h1 style="margin-top:0"&gt;Hello Div&lt;/h1&gt;
              &lt;p style="margin-top:0"&gt;Div is shown&lt;/p&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Cheers</p>