Nested Animated Collapsible DIV

**ccattell** · 05-03-2008, 07:12 AM

I am working with a page that uses the Animated Collapsible DIV script and i need to open a second instance of the script INSIDE of the first div, however, the second div slides under the first, instead of expanding it more to accomodate the newly expanded second div

**dfaust** · 10-24-2008, 06:28 PM

I don't know what you mean by "the second div slides under the first..." I am doing this and it works like any other nesting:
1st div
..2nd div
.....3rd div
.....end 3rd div
..end 2nd div
end first div

You just have to be careful that you put your end divs in the right place. You can see an example of how it works on this page:
http://www.hollandfamily.us/3wood.htm#Rural The different colored backgrounds make it easy to see.

**ddadmin** · 10-24-2008, 06:50 PM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

You can have one collapsible DIV within another. Just make sure of the following:

1) The parent collapsible DIV doesn't have an explicit CSS height attribute declared that limits the overall height of the DIV.

2) If the parent collapsible DIV is part of a group (ie: animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')), that the child collapsible DIV isn't declared as part of the same group (so no group=pets when initializing it).

Here's a working demo:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script type="text/javascript">

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('mycat', 'fade=0,speed=400,hide=1')


animatedcollapse.init()

</script>

<body>

<p><b>Example 4 (part of group "pets"):</b></p>

<a href="javascript:animatedcollapse.toggle('cat')"><img src="http://i25.tinypic.com/wa0img.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('cat')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cat')">Slide Up</a>

<div id="cat" style="width: 400px; background: #BDF381;">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.

<br />
<a href="javascript:animatedcollapse.toggle('mycat')"><img src="http://i25.tinypic.com/wa0img.jpg" border="0" /></a>

<div id="mycat">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>


</div>

**dfaust** · 10-25-2008, 04:57 PM

I don't see what the "group" thing does. Can you explain groups, please?

**ddadmin** · 10-26-2008, 07:52 AM

A collapsible DIV can be part of a group, so when one DIV within the group is expanded, the last open DIV is closed. If you're nesting one collapsible DIV within another, you cannot have both the parent and child DIV be part of the same group. That's because what happens then, when you expand the child DIV for example, the parent DIV is closed, resulting in the child DIV being collapsed indirectly as well.

**williamb** · 11-12-2008, 09:46 PM

I will chime in on this post as I am attempting to do the same thing.

As you can see from the head definition area these two are in separate groups.
To illustrate I am doing this
//head section
define div, place it in group 1 [animatedcollapse.addDiv('usercp', 'fade=1,height=120px,group=Topics')]
define div, place it in group 2 [animatedcollapse.addDiv('usercp_overview', 'fade=1,height=80px,group=usercp')]

//body section

Code:

<a href="javascript:animatedcollapse.toggle('usercp')">Orienting Yourself in the User Control Panel</a>
    	<div id="usercp" style="width: 400px; height:auto; background: #BDF381;">
    		<a href="javascript:animatedcollapse.toggle('usercp_overview')">Overview</a>
                	<div id="usercp_overview" style="width: 400px; background: #BDF381;">Place the content of the Overview here</div></div>

What happens is I can click on the "Orienting Yourself in the User Control Panel" link and that opens the div, but in that container div when clicking on the "Overview" link it places its contents on over or under (can't tell really) over the next parent content item instead of expanding the parent content to allow for the content from "Overview".

Any ideas?

**ddadmin** · 11-13-2008, 02:17 AM

Will:
That's probably due to the parent "usercp" DIV having an explicit height (ie: 120px). When the inner "usercp_overview" DIV tries to expand, it bumps into the height limit of its parent and spills over outside the parent DIV.

**williamb** · 11-13-2008, 07:46 PM

DOH! I forgot the 'KISS' rule and thought to hard....thanks, I am humbled by my own stupidity once again. Great forums by the way!

Thanks again!

Thread: Nested Animated Collapsible DIV

Thread Tools

Search Thread

Nested Animated Collapsible DIV

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions