jQuery - toggle margin and height to zero then back again?
<p>I have an element, its CSS 'display' is set to 'none', its height is set to 20px, and margin-top set to zero pixels.</p>

<p>When a user clicks a button, I want my elements height and margin set to 0px. Then I want it to set 'display' to 'block' and animate its height and margin to the values as defined in the CSS - 20px - to slide and reveal itself.</p>

<p>When the user clicks the button again, I want to animate my elements height and margin back to zero.</p>

<p>jQuerys toggle / slideToggle functions don't seem to take margin into account so I get a jumpy animation, hence why I want to do my own animate script so I've got proper control over what's being animated.</p>

<p>What's the best way to do this? When I try, I just end up creating a mess. Perhaps there are some best practise guides available? I feel pretty much on my own beyond simple scripts like 
"$('.my-thing').click().animate({'height', '5px'});" and whenever I try to do something more complicated than that it becomes a huge mess.</p>
