Reveal content by animating height (not hiding all content)
<p>I want to to partially display a list and then when a button is clicked i'd like to change the class of the button and show the full list by using the full height of the div, then when the button is clicked again i'd like it to start from its initial reveal, not hide the whole thing.</p>

<p>HTML:</p>

<pre><code>&lt;section id="newsletters"&gt;
&lt;h4&gt;&lt;a href="#rss"&gt;&lt;/a&gt;&lt;span&gt;Related&lt;/span&gt; Button&lt;/h4&gt;
    &lt;nav&gt;
        &lt;ul&gt;
           &lt;li&gt;1&lt;/li&gt;
           &lt;li&gt;1&lt;/li&gt;
           &lt;li&gt;1&lt;/li&gt;
           &lt;li&gt;1&lt;/li&gt;
           &lt;li&gt;1&lt;/li&gt;      
        &lt;/ul&gt;
    &lt;/nav&gt;
&lt;a class="hide" href="#"&gt;Show / Hide
&lt;/a&gt;&lt;/section&gt;
</code></pre>

<p>Jquery</p>

<pre><code> $('section#newsletters .hide').click(function() {
    $('section#newsletters nav').toggle(400);
    return false;
   });
</code></pre>
