Animated Collapsible DIV v2.4

[jelly46]

http://www.dynamicdrive.com/dynamici...edcollapse.htm

This is brilliant and good to work with, there is one issue i have if someone can help.

I have used example 4 bacause it visually does exactly what i need, however there is one little problem i cant solve.

I copied the div and now have 2 collapsible divs next to each other, which nearly do exactly what i need.

I have lined up the 2 divs next to each other they both open, but the one on the left pushes the right one out to the right and i don't know how to do that.

here is the code:

The animatedcollapse.js is too long to put but can be found here http://www.dynamicdrive.com/dynamici...edcollapse.htm

<script type="text/javascript">

    animatedcollapse.addDiv('jason', 'fade=1,height=80px')
    animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
    animatedcollapse.addDiv('michael', 'fade=1,height=120px')

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

    animatedcollapse.ontoggle = function ($, divobj, state) { //fires each time a DIV is expanded/contracted
        //$: Access to jQuery
        //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
        //state: "block" or "none", depending on state
    }

    animatedcollapse.init()
</script>

<div id="mobile_navigation">
<div id="sectionnav">
<a href="#" rel="toggle[dog]" data-openimage="section_active.gif" data-closedimage="section.gif"><img src="collapse.jpg" border="0" /></a> 
<div id="dog">
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>

<div id="searchnav">
<a href="#" rel="toggle[cat]" data-openimage="search_active.gif" data-closedimage="search.gif"><img src="collapse.jpg" border="0" /></a> 

<div id="cat">
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> 
</div>

[ddadmin]

Hmm looks like a layout issue that can be solved if you float two container DIVs so they appear side by side, then place each animated content inside each of these DIVs respectively.

Please post a link to the page on your site that contains the problematic script so we can check it out.

[jelly46]

Hello

Thanks for replying, i don't have a link as of yet its on our internal dev server. Would screen shots do?

Thanks

[jelly46]

This is now solved it was a width issue in the CSS, thank you.