View Full Version : Just ONE div expanded? (An. Collapsible DIV)

07-03-2007, 10:18 AM
1) Script Title: Animated Collapsible DIV

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

3) Describe problem: Hi, this is really an awesome script, but I was wondering wether it's possible to do something like this or not: One div is expanded, then as you expand another one the first div is contracted. In other words, I'd like only one div expanded at a time.

Thanks in advance :)

07-03-2007, 07:36 PM
There's no easy way right now to do this unfortunately. Each Collapsible content exists independent of the next, unlike the more complete Switch Content script (http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm), which supports such a feature a more. At some point I may expand the former to more closely match the later, but only if there's enough demand, since it would mean a big increase in code size.

07-13-2007, 06:05 PM
I agree with AnotherVessla, expanding one DIV at a time would be a great addition to the script. I'm experimenting with the script for a high school website and have 12 DIVs in the menu, and without collapsing each DIV it ends up as a very long menu. Here's a link to the test menu: http://www.fcps.edu/LangleyHS/newsite/dropmenutest.html

07-13-2007, 06:38 PM
You may want to look into:


It is a menu, but it has the type of functionality you seem to want, along with an animated expanding/contracting action. Perhaps you could adapt it to your purposes.

07-19-2007, 03:13 AM
Has anyone found a solution to this? My idea was to make a collapse all function that, when you hover over a particular div, collapses all open divs, then opens the particular one hovered. I created each animated div in an array which makes it easy to iterate. Something like this:

function collapseAll(){

where boxes is the array of animated divs. Unfortunately is doesn't work properly for multiple reasons, you can view it here: (http://bcomsolutions.ca/animate.html)
First reason: when you hover over the inner box, it disappears (not sure why).
Second reason: if you mouseover the box and immediately mouseout, then mouseover again, it hides the box, as it's collapsing everything immediately. Is there a boolean var to test if the div is already open? then you could do something like:


I don't really have any other ideas, maybe someone with a bit more programming experience has some?

I've only tested this on Firefox 2.0 on a Mac, haven't done cross browser testing yet, but the problem remains the same.