Animated Collapsible DIV - accounting for hidden content

[Feefor]

1) Script Title: Animated Collapsible DIV


2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:
First, thanks for the great script.
Sorry no example URL as working on intranet site.
Main problem is we have various display:none elements within our collapsible div. These can change state to be visible using user action.
The animated div container then is not large enough to contain this content.
We were thinking that maybe we could re-calculate the various heights when an element becomes available and then reload the script.
Or possibly allow somehow for the height of all hidden objects on window.load

Any pointers on how to/best way address this problem would be appreciated.

All the best
Steve

[BYK]

Have you tried using the offsetHeight or scrollHeight properties of the DIV's?

[jscheuer1]

Or possibly allow somehow for the height of all hidden objects on window.load

If you mean window.onload, the script already does this. If you change the content dynamically after the page loads, that can result in problems, or if you set the height for the div (an option), and set it incorrectly, this overrides the script calculating the height for you. Also, if there simply isn't enough room in your layout around the dynamic content, this could also be a problem.

From the demo page:


Considerations when defining your DIV

This script will work on both DIVs with an explicit CSS "height" attributed defined, and those without. For example:


<!--DIV with height defined -->
<div id="dog" style="width: 300px; height: 110px;"></div>


<!--DIV without height defined-->
<div id="cat" style="width: 300px;"></div>

The advantage of a DIV with a height attribute explicitly defined is that the user can expand/contract the DIV almost immediately, instead of after the document has fully loaded (when the script can dynamically get its height). Of course, in real life, you often cannot set the DIV's height in advanced for various reasons, and this script will still work in these cases.

Another thing to take note is if you wish to add padding/margins to the DIV- you'll need to do it inside another DIV contained within it instead, for example:


<div id="cat" style="width: 300px;">
<div style="padding: 0 5px">
Some content
</div>
</div>

In other words, the "padding: 0 5px" declaration shouldn't be added inside the starting DIV itself, but within it. The reason for this limitation is that padding and margins will throw off certain calculations within the script.