Animated Collapsible DIV

**JimWormold** · 09-04-2009, 02:15 PM

Anyone know if this script can be modified so the expanded content is revealed "upwards". Eg, the "expand" link sits at bottom of a container - when clicked on the expanded div is revealed above it as if being "shoved up" from below?

**vwphillips** · 09-04-2009, 03:56 PM

demonstration of concept

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.p {
  position:relative;left:100px;top:200px;width:100px;height:20px;background-Color:red;
}

#tst {
  position:absolute;overflow:hidden;left:0px;top:0px;width:100px;height:0px;background-Color:#FFFFCC;
}

/*]]>*/
</style>
<script src="http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.js" type="text/javascript"></script>
<script  type="text/javascript">
/*<![CDATA[*/

function Test(id,ms){
 this.obj=document.getElementById(id);
 this.maxh=this.obj.getElementsByTagName('DIV')[0].offsetHeight;
 this.top=this.obj.offsetTop;
 this.hoop=zxcBAnimator('height#',this.obj,this.maxh,0,10);
 this.hoop=zxcBAnimator('top#',this.obj,this.top-this.maxh,this.top,10);
 this.ms=ms||1000;
}

Test.prototype.Toggle=function(){
 this.hoop=zxcBAnimator('height#',this.obj,this.maxh,0,this.ms);
 this.hoop=zxcBAnimator('top#',this.obj,this.top-this.maxh,this.top,this.ms);
}

/*]]>*/
</script>

</head>

<body onload="T=new Test('tst');">
<div class="p" onclick="T.Toggle();">
<div id="tst" >
 <div >
  Line 0 <br />
  Line 1 <br />
  Line 2 <br />
  Line 3 <br />
  Line 4 <br />
  Line 5 <br />
  Line 6 <br />
  Line 7 <br />
  Line 8 <br />
  Line 9 <br />
 </div>
</div>
Toggle
</div>



</body>

</html>

**JimWormold** · 09-04-2009, 04:10 PM

Wow Vic. That's exactly what I was looking for!

Thanks very much. You've saved me a heap of trouble.

**vwphillips** · 09-04-2009, 04:28 PM

better

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.p {
  position:relative;left:100px;top:200px;width:100px;height:20px;background-Color:red;
}

#tst {
  position:absolute;overflow:hidden;left:0px;top:0px;width:100px;height:0px;background-Color:#FFFFCC;
}

/*]]>*/
</style>
<script src="http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.js" type="text/javascript"></script>
<script  type="text/javascript">
/*<![CDATA[*/

function Test(id,ms){
 var obj=document.getElementById(id);
 this.maxh=obj.getElementsByTagName('DIV')[0].offsetHeight;
 this.top=obj.offsetTop;
 this.hoop=zxcBAnimator('height',obj,1,0,10);
 this.toop=zxcBAnimator('top',obj,this.top-1,this.top,10);
 this.ms=ms||1000;
}

Test.prototype.Toggle=function(){
 var ud=this.hoop.data[2]==0;
 this.hoop.update([this.hoop.data[0],ud?this.maxh:0],this.ms,[0,this.maxh]);
 this.toop.update([this.toop.data[0],ud?this.top-this.maxh:this.top],this.ms,[0,this.maxh]);
}

/*]]>*/
</script>

</head>

<body onload="T=new Test('tst');">
<div class="p" onclick="T.Toggle();">
<div id="tst" >
 <div >
  Line 0 <br />
  Line 1 <br />
  Line 2 <br />
  Line 3 <br />
  Line 4 <br />
  Line 5 <br />
  Line 6 <br />
  Line 7 <br />
  Line 8 <br />
  Line 9 <br />
 </div>
</div>
Toggle
</div>


</body>

</html>

**Renzo** · 09-23-2009, 10:15 PM

Thanks vic, I'm using this script in my website, I know it's a prototype, but I must tell you that works fine in Firefox but in Explorer does not work, you might do something?

Thanks

PS: sorry for my english

**vwphillips** · 09-24-2009, 07:30 AM

wgat version of IE are you using?

**Renzo** · 09-24-2009, 05:21 PM

IE 7 is installed on my computer, I've got to try on other versions.

Thank you for your speedy response

**vwphillips** · 09-25-2009, 06:59 AM

just retested the code above in IE7 and it works for me.

popst any modified code or your application or link to your application

**Renzo** · 09-25-2009, 11:31 AM

Thank you Vic, but I discovered the problem.

I have the lightbox script that problem.
Remove link to the lightbox js your script works perfectly.

Ligtbox several problems apparently is not the first time I had trouble with this script.

Thanks anyway for your interest.