title: Expanding menu on click
body: <p>I have a basic menu looking something like this.</p>
  
  <pre><code>&lt;ul id="menu"&gt;
  &lt;li id="auctions"&gt;Auctions&lt;/li&gt;
  &lt;li class="submenu"&gt;Submenu 1&lt;/li&gt;
  &lt;li class="submenu"&gt;Submenu 2&lt;/li&gt;
  &lt;li class="submenu"&gt;Submenu 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want the three submenus to be hidden until the text "Auctions" is clicked. Then they're supposed to appear, and become hidden again when "Auctions" is clicked a second time and so on. Ive tried something like this.</p>
  
  <pre><code>$(function() {
      $('#auctions').click(function() {        
          $('#menu').animate({'height': '200'});
          $('#submenu').animate({opacity : 'toggle'});
      }, function () {
          $('#menu').stop().animate({'height': '100'});
          $('#submenu').animate({opacity : 'toggle'});
      });
  });
  </code></pre>
  
  <p>In all honesty I suck at jquery. How do I approach this?</p>