jQuery slidetoggle resizable sharing height issue
<p>I have a container that is the page's height.  In this container is a series of slideToggle containers that also are re-sizable.  I am trying to figure out a way to make it so they all the slideToggle containers can share the parent's height.  They can all either be opened or closed and also re-sized.  Here is a <a href="http://jsfiddle.net/RTTr9/" rel="nofollow">js fiddle</a>.  I'm not a css expert, so can someone suggest the best approach to tackle this?</p>

<pre><code>div id="container"&gt;        
    &lt;div class="section"&gt;
        &lt;h3 class="section-head"&gt;&lt;a href="#"&gt;Top&lt;/a&gt;&lt;/h3&gt;
        &lt;div class="section-content" &gt;
            Phasellus mattis tincidunt nibh. 
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="section"&gt;
        &lt;h3 class="section-head"&gt;&lt;a href="#"&gt;Middle 1&lt;/a&gt;&lt;/h3&gt;
        &lt;div class="section-content"&gt;
            Phasellus mattis tincidunt nibh. 
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="section"&gt;
        &lt;h3 class="section-head"&gt;&lt;a href="#"&gt;Middle 2&lt;/a&gt;&lt;/h3&gt;
        &lt;div class="section-content"&gt;
            Phasellus mattis tincidunt nibh. 
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="section"&gt;
        &lt;h3 class="section-head"&gt;&lt;a href="#"&gt;Bottom&lt;/a&gt;&lt;/h3&gt;
        &lt;div class="section-content"&gt;
            Phasellus mattis tincidunt nibh. 
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
