This is brilliant and good to work with, there is one issue i have if someone can help please.
I have used example 4 bacuase 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.
<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>
Sounds like a css problem to me. What I don't get is, if you're already loading jQuery, why not just use the toggle function?
Code:
<!DOCTYPE html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
#sectionnav,#searchnav{
width:50%;
float:left}
</style>
</head>
<body>
<div id="mobile_navigation">
<div id="sectionnav">
<a href="#" id="dogtoggle" data-openimage="section_active.gif" data-closedimage="section.gif"><img src="collapse.jpg" border="0" /></a>
<div id="dog" class="sliders">
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="#" id="cattoggle" data-openimage="search_active.gif" data-closedimage="search.gif"><img src="collapse.jpg" border="0" /></a>
<div id="cat" class="sliders">
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>
<script type="text/javascript">
$(document).ready(function(){
$(".sliders").hide();
function setSliders(target,toSlide,speed){
$(target).click(function () {
$(toSlide).toggle(speed);
});
}
setSliders('#dogtoggle','#dog',2000);
setSliders('#cattoggle','#cat',300);
});
</script>
</body>
</html>
Before you post, read our: 
