<!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[*/
.content {
width:200px;height:200px;background-Color:#FFFFCC;
}
.title {
width:200px;height:20px;background-Color:#FFCC66;
}
/*]]>*/
</style></head>
<body>
<input type="button" name="" value="Open All" onmouseup="zxcAccordian.All('tst',true);"/>
<input type="button" name="" value="Close All" onmouseup="zxcAccordian.All('tst',false);"/>
<div id="tst" >
<div class="content" >
<div class="title" ><a rel="close" >open</a></div>
</div>
<div class="content" >
<div class="title" ><a rel="close" >open</a></div>
</div>
<div class="content" >
<div class="title" ><a rel="close" >open</a></div>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Simple Accordian (21-September-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcAccordian={
init:function(o){
var id=o.ID,h=o.OpenHeight,ms=o.SlideDuration,obj=document.getElementById(id),clds=obj.childNodes,t,lk,h=typeof(h)=='number'?h:false,uh,ary=[],z0=0;
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
t=clds[z0].getElementsByTagName('DIV')[0];
if (t){
lk=t.getElementsByTagName('A')[0];
if (lk){
this.addevt(lk,'mouseup','Open',id,ary.length);
t=t.offsetHeight;
uh=h&&h>t?h:clds[z0].offsetHeight;
ary.push([clds[z0],t,t,uh,'dly'+z0,true,uh-t,lk,lk.rel,lk.innerHTML]);
clds[z0].style.height=t+'px';
}
}
}
}
this['zxc'+id]={
ary:ary,
ms:typeof(ms)=='number'&&ms>=0?ms:1000
}
},
Open:function(id,nu){
var o=this['zxc'+id],f,t,a;
if (o){
this.All(id,nu);
a=o.ary[nu];
a[7].innerHTML=a[a[5]?8:9];
clearTimeout(o[a[4]]);
f=a[1];
t=a[a[5]?3:2]
this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/a[6])+10);
a[5]=!a[5];
}
},
All:function(id,nu){
var o=this['zxc'+id],f,t,a,z0=0;
if (o){
for (;z0<o.ary.length;z0++){
if (z0!=nu||typeof(nu)=='boolean'){
a=o.ary[z0];
clearTimeout(o[a[4]]);
f=a[1];
t=a[nu===true?3:2]
this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/a[6])+10);
a[7].innerHTML=a[nu===true?8:9];
a[5]=nu!==true;
}
}
}
},
animate:function(o,ary,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
ary[1]=Math.max(now,f<0||t<0?now:0);
ary[0].style.height=ary[1]+'px';
}
if (ms<mS){
o[ary[4]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
}
else {
ary[1]=t;
ary[0].style.height=t+'px';
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
}
}
zxcAccordian.init({
ID:'tst', // the unique ID name of the parent DIV. (string)
// OpenHeight:100, //(optional) force the 'open' height of the content DIVs. (number, default = the offset height of the content DIV)
SlideDuration:500 //(optional) the slide duration in milli seconds. (number, default = 1000)
});
/*]]>*/
</script>
</body>
</html>
