animation - Basic jQuery slideUp and slideDown driving me mad!

Question

my jQuery skills are pretty good normally but this is driving me mad!

It's a fairly simple accordian I've coded up from scratch. Using jQuery 1.3.2 so there shouldn't be any jumping bugs but basically if you take a look at the example:

http://www.mizudesign.com/jquery/accordian/basic.html

I'm displaying the height for the target div on the right - if it contains text it thinks it's shorter than it is and jumping. If it's an image there's no problem.

I can't figure out where I'm going wrong - it's obviously in the CSS somewhere but I've tried all the usual suspects like display:block

Any ideas would be gratefully received!

Yours, Chris

PS Please forgive the nature of the source code, I've ripped it out the whole project I'm working on so it does include some divs that don't really need to be there.

Answer 1

I must admit I've found my own dynamic solution now.

http://www.mizudesign.com/jquery/accordian/basic.html should be fixed.

It's very simple really - just adds the height using .css before hiding the div. Works a treat :)

$("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});

$("#PlayerButtonsContent div").hide();