Results 1 to 8 of 8

Thread: Nested Animated Collapsible DIV

  1. #1
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Nested Animated Collapsible DIV

    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

  2. #2
    Join Date
    Jun 2008
    Location
    Huntsville, Alabama USA
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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>
    DD Admin

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

    dfaust (10-25-2008)

  5. #4
    Join Date
    Jun 2008
    Location
    Huntsville, Alabama USA
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

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

  6. #5
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.
    DD Admin

  7. #6
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  8. #7
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.
    DD Admin

  9. #8
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •