Just ONE div expanded? (An. Collapsible DIV)

[AnotherVessla]

1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.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

[ddadmin]

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, 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.

[LHSCurator]

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

[jscheuer1]

You may want to look into:

http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

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.

[tizzod]

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(){
			
	for(i=0;i<boxes.length;i++){
		boxes[i].slideup();
	}
}

where boxes is the array of animated divs. Unfortunately is doesn't work properly for multiple reasons, you can view it here:
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:

if(boxes[i].isOpen){boxes[i].slideup();}

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.