Animated Collapsible DIV in a list [Archive]

ethann

12-22-2011, 11:20 AM

1) Script Title:Animated Collapsible DIV v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem: I'm trying to make a list that looks like a table to combine with Animated Collapsible script and here's what i have

<!DOCTYPE HTML>

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

/***********************************************
* Animated Collapsible DIV v2.4- (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('div1', 'speed=40,fade=1,height=80px')
animatedcollapse.addDiv('div2', 'fade=1,height=80px')
animatedcollapse.addDiv('div3', 'fade=1,height=80px')

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

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
}

animatedcollapse.init()

</script>
<style type="text/css">

dl.multiple-table dt
{
float: left;
clear:both;
width: 24px;
margin: 0;
padding: 5px;
font-weight: bold;
}

dl.multiple-table dd
{
float: left;
margin-left: 50px;
padding: 5px;
}

/* ========================================================================== */

dl.multiple-table2 dt
{
float: left;
clear: both;
width: 24px;
margin: 0;
padding: 5px;
font-weight: bold;
}

dl.multiple-table2 dd
{
float: left;
margin-left: 50px;
padding: 5px;
}

</style>

</head>

<body>
<hr/>
<dl class="multiple-table">
<dt><a href="javascript:animatedcollapse.toggle('div1')"><img src="collapse.png" border="0" /></a></dt>
<dd>Name</dd>
<dd>Name1</dd>
<dd>Name2</dd>
<dd>Name3</dd>

<dd>Name4</dd>
<dd>Name5</dd>
</dl>

<div id="div1" style="width: 1200px;display:none">
<dl class="multiple-table2">
<dt></dt>
<dd>name</dd>

<dd>name1</dd>
<dd>name2</dd>
<dd>name3</dd>
<dd>name4</dd>
<dd>name5</dd>
</dl>

</div>

<hr/>

</body>

</html>

It looks terrible when it collapse and the hr position it's wrong, css kills me :( .