Question

I have a slide-open visible / slide-close hidden div.

That effect is achieved by animate()ing div’s height.

The problem is that div is shared by multiple content (different text paragraphs) which their height’s are not known ahead.

So how do I know how the height of the div will be when I put in such content so that I can animate(‘height’:’-px’) to slide-open the div?

Answer 1

Just use slideDown() and you won’t need to calculate the height.

The only other way you could do (but I don’t know your exact circumstances) is to clone() the element and append it to the document, set its height to auto, and then get the height() of that.

var cloned = $('#some-element').clone();

cloned.css({ position: 'absolute', left: '-9999px', height: 'auto' });

var height = cloned.height();

cloned.remove();