Animated Collapsible DIV in a list

**ethann** · 12-22-2011, 11:20 AM

1) Script Title:Animated Collapsible DIV v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.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

Code:

<!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

.

**ethann** · 12-24-2011, 06:45 AM

problem solved

Thread: Animated Collapsible DIV in a list

Thread Tools

Search Thread

Animated Collapsible DIV in a list

Bookmarks

Bookmarks

Posting Permissions