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>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.
// **** Application Notes
// see http://www.vicsjavascripts.org.uk/Animate/Animate.htm
//
// **** Functional Code(1.52K) - NO NEED to Change
function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}
zxcAnimate.prototype={
animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},
cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},
apply:function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}
}
function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
</script>
<script type="text/javascript">
/*<![CDATA[*/
// Animated Collapse (12-April-2011) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk
function zxcCollapse(o){
if (!zxcCollapse.ary){
zxcCollapse.ary=[];
}
var nme=o.group||o.ID;
if (!zxcCollapse.ary[nme]){
zxcCollapse.ary[nme]=[];
}
zxcCollapse.ary[nme].push(new zxcCollapseOOP(o));
}
function zxcShow(grp,nme){
nme=nme||grp;
var ary=zxcCollapse.ary[grp]||[],z0=0;
for (;z0<ary.length;z0++){
if (ary[z0].nme==nme){
ary[z0].open();
}
else {
ary[z0].close();
}
}
}
function zxcHide(grp){
var ary=zxcCollapse.ary[grp]||[],z0=0;
for (;z0<ary.length;z0++){
ary[z0].close();
}
}
function zxcToggle(grp,nme){
nme=nme||grp;
var ary=zxcCollapse.ary[grp]||[],z0=0;
for (;z0<ary.length;z0++){
if (ary[z0].nme==nme){
if (ary[z0].ud){
ary[z0].close();
}
else {
ary[z0].open();
}
}
else {
ary[z0].close();
}
}
}
function zxcCollapseOOP(o){
var obj=document.getElementById(o.ID),max=o.height||obj.offsetHeight,ms=o.speed||500,img=document.getElementById(o.imgID),src=o.collapseSRC,div;
obj.style.position='relative';
obj.style.overflow='hidden';
obj.style.display='none';
obj.style.height='0px';
this.nme=o.ID;
this.max=max;
this.opac=o.fade?0:100;
this.hoop=new zxcAnimate('height',obj,0);
this.hoop.Complete=function(){
if (this.data[0]==0){
this.obj.style.display='none';
}
}
this.ooop=new zxcAnimate('opacity',obj,this.opac);
this.img=false;
if (img&&src){
this.img=[img,img.src,src];
}
this.ud=false;
this.div=false;
if (o.reverse==true){
div=document.createElement('DIV');
div.style.position='relative';
div.style.height=max+'px';
div.innerHTML=obj.innerHTML;
obj.innerHTML='';
obj.appendChild(div);
this.div=new zxcAnimate('top',div,-max);
}
this.ms=20;
if (o.open==true){
this.open()
}
this.ms=ms;
}
zxcCollapseOOP.prototype={
open:function(){
this.hoop.obj.style.display='block';
this.hoop.animate(this.hoop.data[0],this.max,this.ms,[0,this.max]);
this.ooop.animate(this.ooop.data[0],100,this.ms,[0,100]);
if (this.div){
this.div.animate(this.div.data[0],0,this.ms,[0,this.max]);
}
if (this.img){
this.img[0].src=this.img[2];
}
this.ud=true;
},
close:function(){
this.hoop.animate(this.hoop.data[0],0,this.ms,[0,this.max]);
this.ooop.animate(this.ooop.data[0],this.opac,this.ms,[0,100]);
if (this.div){
this.div.animate(this.div.data[0],-this.max,this.ms,[0,this.max]);
}
if (this.img){
this.img[0].src=this.img[1];
}
this.ud=false;
}
}
/*]]>*/
</script><script type="text/javascript">
function Init(){
zxcCollapse({ID:'jason', fade:true, height:100, reverse:true});
zxcCollapse({ID:'kelly', fade:true, height:120, reverse:true});
zxcCollapse({ID:'michael', fade:true, height:140});
zxcCollapse({ID:'cat', fade:0,speed:400, group:'pets', open:true, imgID:'cimg',collapseSRC:'http://www.dynamicdrive.com/dynamicindex17/collapse.jpg'});
zxcCollapse({ID:'dog', fade:0,speed:400,group:'pets', imgID:'dimg', collapseSRC:'http://www.dynamicdrive.com/dynamicindex17/collapse.jpg'});
zxcCollapse({ID:'rabbit', fade:0,speed:400,group:'pets', imgID:'rimg', collapseSRC:'http://www.dynamicdrive.com/dynamicindex17/collapse.jpg'});
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
</script>
</head>
<body>
<b><a href="javascript:zxcShow('jason');zxcShow('kelly');zxcShow('michael');">Show Examples 1, 2, 3</a> | <a href="javascript:zxcHide('jason');zxcHide('kelly');zxcHide('michael');">Hide Examples 1, 2, 3</a> </b>
<p><b>Example 1 (individual):</b></p>
<img src="http://i25.tinypic.com/wa0img.jpg" border="0" onmouseup="zxcToggle('jason');" /> <a href="javascript:zxcShow('jason')">Slide Down</a> || <a href="javascript:zxcHide('jason')">Slide Up</a>
<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.<br />+Reverse</b><br />
</div>
<p><b>Example 2 (individual):</b></p>
<img src="http://i25.tinypic.com/wa0img.jpg" border="0" onmouseup="zxcToggle('kelly');"/> <a href="javascript:zxcShow('kelly')">Slide Down</a> || <a href="javascript:zxcHide('kelly')">Slide Up</a>
<div id="kelly" style="width: 300px; background: #D2FBFF; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.<br />+Reverse</b><br />
</div>
<p><b>Example 3 (individual):</b></p>
<img src="http://i25.tinypic.com/wa0img.jpg" border="0" onmouseup="zxcToggle('michael');" /> <a href="javascript:zxcShow('michael')">Slide Down</a> || <a href="javascript:zxcHide('michael')">Slide Up</a>
<div id="michael" style="width: 300px; background: #E7FFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>
<hr style="margin: 1em 0" />
<p><b>Example 4 (part of group "pets"):</b></p>
<img id="cimg" src="http://www.dynamicdrive.com/dynamicindex17/expand.jpg" border="0" onmouseup="zxcToggle('pets','cat');" /> <a href="javascript:zxcShow('pets','cat')">Slide Down</a> || <a href="javascript:zxcHide('pets','cat')">Slide Up</a>
<div id="cat" style="width: 400px; background: #BDF381;">
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>
<p><b>Example 5 (part of group "pets"):</b></p>
<img id="dimg" src="http://www.dynamicdrive.com/dynamicindex17/expand.jpg" border="0" onmouseup="zxcToggle('pets','dog');" /> <a href="javascript:zxcShow('pets','dog')">Slide Down</a> || <a href="javascript:zxcHide('pets','dog')">Slide Up</a>
<div id="dog" style="width: 400px; background: #BDF381;">
The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
</div>
<p><b>Example 6 (part of group "pets"):</b></p>
<img id="rimg" src="http://www.dynamicdrive.com/dynamicindex17/expand.jpg" border="0" onmouseup="zxcToggle('pets','rabbit');" /> <a href="javascript:zxcShow('pets','rabbit')">Slide Down</a> || <a href="javascript:zxcHide('pets','rabbit')">Slide Up</a>
<div id="rabbit" style="width: 400px; background: #BDF381">
Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.
</div>
</body>
</html>
New Comer (less than 5 posts)
jquery Collapsing Div - How to reverse collapse direction?
Posting Permissions
Reply With Quote
Bookmarks