Animated Collapsible DIV v2.4

[jelly46]

Hello

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

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

I copied the div and now have 2 collapsable 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 dont know how to do that.

here is the code

Thanks

the animatedcollapse.js is too long to put but can be found here http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.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>

[fobos]

well i guess you going to have to set a fixed width on the divs so the left one doesnt push out the right when being shown.

[jelly46]

I did and still no good, thanks fobos

[jelly46]

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