Animated Collapsible DIVS -additional DIVS float aside 3rd DIV

[jono]

Animated Collapsible DIV v2.2

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm


I've implimented the Animated Collapsible DIV v2.2 script into my website and have altered the example script (with the 3 example DIVS - cat, dog, rabbit) to fit my current needs;

DIV 1 - food
DIV 2 - drink
DIV 3 - shopping

It all seems to be working fine until extra DIVS are added.
When it came to adding extra DIVS in , the DIVS and the toggle buttons that have been added are floating alongside the 3rd DIVs toggle button.

so now;
DIV 1 - food
DIV 2 - drink
DIV 3 - shopping DIV 4 - entertainment

Only if the 3rd DIV (shopping) is expanded, will the 4th DIV will appear below the 3rd DIV as normal.

Incidentally I am using the group functionality where one DIV opening causes another to close.


Thanks in advance for any help. This is driving me nuts!

[ddadmin]

If DIV4 is nested within DIV3, then naturally unless DIV3 itself is expanded, DIV4 will always be invisible regardless of whether it's expanded or contracted itself. Or am I misunderstanding your question?

[jono]

Hi,

Sorry if the initial description wasn't too good. The problem isn't to do with expanding or contracting the DIVs. That aspect seems to be working.

The problem is that the 4th toggle button is appearing aside the 3rd toggle button (instead of below it). I've attached an image of the problem to help.

To add the 4th DIV (which is 'leisure' in the screenshot) I simply copied the script for the 3rd DIV and made ID changes to it accordingly. I also added the extra script in the head of the page to add the div;

animatedcollapse.addDiv('leisure', 'fade=0,speed=800,group=pets,hide=1')