How to get the height of hidden content in a div setup with overflow:hidden?

Question

I want to make a div that expands to reveal its content when clicked. What I did to date is:

• Created a div, set to overflow:hidden
• Created a JS function that toggles the height of the div between "minimized" and "maximized" (20px height and XYZpx height).

So far everything works, except I don't know how to get the height of the content inside my div so I can make the div resize to fit the content exactly. So in essence I have hidden content that overflows from the 20px "minimized" div, and I can expand the div to reveal the overflowing content but I don't know by how much to expand it.

Do you have an idea how I could do this?

Thanks in advance!

Answer 1

Can't you just remove the overflow hidden and height css. And the div will resize the correct height. And if you need to find the exact height. Use javascript to remove the overflow:hidden and height. Then measure the offsetHeight and set that to the height. Though if you are doing this it might be better to remove the element from the DOM then place back in once you are done.

Answer 2

Here's my stab at the problem. I wasn't sure exactly what you were trying to do.

http://jsfiddle.net/Mw6Ys/2/