View Full Version : Animated Collapse - function to hide all + one other thing...

09-28-2009, 10:50 PM
1) Script Title: Animated Collapsible DIV v2.4

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

3) Describe problem:

Hi. So far I have had great success with this script - thank you so much! However I am wondering if there is a function to collapse all the open divs? Here is my dilemma:

I have an accordion navigation (the regular jQuery accordion) with four main areas. Each houses a list of several sub-areas. When each of these sub areas is clicked, I am using the animated collapse script to show a navigation layer with more options. So far, no problem. However I would like to have it so that when the user clicks on one of the top tier choices, ALL open divs close. Normally I can understand how this is easy to do, however I have two layer/div groups and a background div layer that is always expanded on a sub-nav click. Is it possible to close all initiated divs?

And the other question relates to passing a css class to the sub-nav text when I click on it to show a div. This would be to change its color/bold, etc. so that the choice appears like the activated one when the user initiates the div. Any help would be greatly appreciated!

09-29-2009, 08:26 PM
To hide all animated collapsible contents on the page, you can use the following function:

<script type="text/javascript">

function collapseall(){
jQuery.each(animatedcollapse.divholders, function(i, val){


For example:

<a href="javascript:collapseall()">Hide all contents</a>

Regarding how to modify the style of the anchor link that toggles a content, see the solution mentioned in this thread (http://www.dynamicdrive.com/forums/showthread.php?t=48476).

09-30-2009, 06:27 PM
Thank you thank you! I'll give it a shot. Looks like it is exactly what's needed!