jQuery - toggle margin and height to zero then back again?

Question

I have an element, its CSS 'display' is set to 'none', its height is set to 20px, and margin-top set to zero pixels.

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.

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

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.

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.

Answer 1

are you sure it's not a CSS issue rather than a jQuery issue? what i mean is, try the box open first without the jQuery effect to make sure the CSS is ok first, THEN try jQuery. I only ask this because I use slideToggle all the time and it respects my margins.

Answer 2

Try using padding rather than margin. That way the height/width during the animation will be calculated correctly.