title: Toggling menu with jQuery
body: <p>I've got some HTML like the following:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="toggle"&gt;[Open|Close]&lt;/a&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 2-1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 2-2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 2-3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Page 2-4&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Page 4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Page 5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And would like that when the a with the class 'toggle' is clicked the ul will be toggled.  I am fairly decent with basic jQuery stuff, but have no real idea where to start with this one!  Any alternative approaches that achieve the same result would be welcome too.</p>