jquery-ui: creating a customized collapsablility function
<p>I am trying to create <code>&lt;caption&gt;</code> tags that are, by default, uncollapsed but which, as an "onclick" property, can be collapsed. I'd also like for the expansion/collapsing to animate very slightly—I'd like for them to "unfold" or transition vertically downward when expanding and to transition vertically upward when collapsing. </p>

<p>Currently I am using:</p>

<pre><code>jQuery(document).ready(function(){
     $('.cv .collapsable').click(function() {
         $(this).next().toggle('slow');
         return false;
     }).next().hide();
});
</code></pre>

<p>However, this animates the <em>presentation of the content</em> within the collapsed <code>&lt;caption&gt;</code> rather than the unfolding of the parent element. I would really like to see the parent element expanding downward before the content of the element is displayed (or would be equally satisfied with the content of the element becoming visible as the element expands). Either way the issue is that the expansion is instantaneous and a bit jarring, whereas, once expanded, the content fades in gently.</p>

<p>Additionally, this function defaults to a collapsed state rather than an expanded one, and I need it to do the inverse. Basically, I want people to be able to collapse this to conserve screen real-estate if need be, but to otherwise have a normal and complete display of all the content between each <code>caption</code> tag. I'm sure this is very simple, I am complete <em>jquery</em> nub.</p>
