1) Script Title: Trouble combining horizontal accordion inside animated collapsible div

2) Script URL (on DD):

Animated Collapsible Div
http://www.dynamicdrive.com/dynamici...edcollapse.htm

Horizontal Accordion
http://www.dynamicdrive.com/dynamici...haccordion.htm


The behavior of both scripts work totally fine when separated, but when I place the Accordion script between the revealed content div tags of the Anim. Collapse script, the accordion caves in on the mouse location, instead of spreading out to the right.

head code:
Code:
<head>
<!DOCTYPE HTML>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/animatedcollapse.js">
</script>

<script type="text/javascript">

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets')
animatedcollapse.ontoggle=function($, divobj, state){}
animatedcollapse.init()

</script>
<style type="text/css">
<!--
body {
background-color: #333;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#hc2 li{
margin:0 0 0 0;
border: 0px solid black;
}

#hc2 li .hpanel{
padding: 0px;
background: #E2E9FF;
cursor: hand;
cursor: pointer;
}

</style>

<link rel="stylesheet" type="text/css" href="javascript/haccordion.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/haccordion.js">
</script>

<script type="text/javascript">

haccordion.setup({
	accordionid: 'hc2',
	paneldimensions: {peekw:'250px', fullw:'385px', h:'100px'},
	selectedli: [-1, true],
	collapsecurrent: true
})

</script>
</head>
body code:

Code:
<body>

<p><a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="dsgn/motion.png" border="0" /></a></p>
<div id="cat" style="width: 100%; background: #BDF381;">

<div id="hc2" class="haccordion">
	<ul>

	<li style="border-right-width:0">
		<div class="hpanel" style="padding:0px; width:385px">
		<img src="test.png" />
		</div>
	</li>

	<li style="border-right-width:0">
		<div class="hpanel" style="padding:0px; width:385px">
		<img src="test.png" />
        </div>
	</li>

	<li style="border-right-width:0">
		<div class="hpanel" style="padding:0px; width:385px">
		<img src="test.png" />
        </div>
	</li>

	<li>
		<div class="hpanel" style="padding:0px; width:385px">
		<img src="test.png" />
  		</div>
	</li>

  </ul>
</div>

</div>
</body>