<!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:400px;background-Color:#FFFFCC;
}
.header {
width:400px;height:20px;background-Color:#FFCC66;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function Accordian(o){
var oop=this,el=document.getElementById(o.ID),reg=new RegExp('\\b'+o.ContentClass+'\\b'),els=el.getElementsByTagName('*'),ary=[],head,min,cnt=0,z0=0,ms=o.Duration;
for (; z0<els.length;z0++){
if(reg.test(els[z0].className)){
head=els[z0].getElementsByTagName('DIV')[0];
min=head.offsetHeight;
ary.push([els[z0],min,els[z0].offsetHeight,true]);
els[z0].style.overflow='hidden';
els[z0].style.height=min+'px';
this.addevt(head,'mouseup','toggle',cnt++);
}
}
this.ary=ary;
this.ms=typeof(ms)=='number'?ms:1000;
this.lst=false;
}
Accordian.prototype={
toggle:function(nu){
var ary=this.ary,lst=this.lst;
if (ary[nu]){
if (lst&&lst!=ary[nu]&&!lst[3]){
clearTimeout(this.dly2);
this.close(lst[0],lst[0].offsetHeight,lst[1],new Date(),this.ms)
lst[3]=true;
}
clearTimeout(this.dly1);
this.open(ary[nu][0],ary[nu][0].offsetHeight,ary[nu][ary[nu][3]?2:1],new Date(),this.ms)
ary[nu][3]=!ary[nu][3];
this.lst=ary[nu];
}
},
open:function(obj,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)&&now>0){
obj.style.height=now+'px';
}
if (ms<mS){
this.dly1=setTimeout(function(){ oop.open(obj,f,t,srt,mS); },10);
}
else {
obj.style.height=t+'px';
}
},
close:function(obj,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)&&now>0){
obj.style.height=now+'px';
}
if (ms<mS){
this.dly2=setTimeout(function(){ oop.close(obj,f,t,srt,mS); },10);
}
else {
obj.style.height=t+'px';
}
},
addInput:function(nu,id){
var ary=this.ary[nu],obj=ary[0],d=document.getElementById(id),cip=d.getElementsByTagName('INPUT')[0],h=cip.offsetHeight,nip=zxcAddField('INPUT','text',cip.name);
nip.size=cip.size;
obj.style.height=ary[2]+h+'px';
d.appendChild(document.createElement('BR'));
d.appendChild(nip);
ips=obj.getElementsByTagName('INPUT');
ary[2]+=h;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}
}
function zxcAddField(nn,type,nme){
var obj;
try {
obj=document.createElement('<'+nn+' name="'+(nme||'')+'" '+(type?'type="'+type+'" ':'')+' >');
}
catch(error){
obj=document.createElement(nn);
if (type){
obj.type=type;
}
obj.name=nme||'';
}
return obj;
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
A=new Accordian({
ID:'tst',
ContentClass:'content',
Duration:500
});
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<form id="tst">
<div class="content" >
<div class="header" >Section 1</div>
Input 1 <input name="" /><br />
Input 2 <input name="" /><br />
Input 3 <input name="" /><br />
<div id="dynamicInput">
Entry 1<br><input type="text" name="myInputs[]">
</div>
<input type="button" value="Add another text input" onClick="A.addInput(0,'dynamicInput');">
</div>
<div class="content" >
<div class="header" >Section 2</div>
Input 3 <input name="" /><br />
Input 4 <input name="" /><br />
<div id="dynamicInput1">
Entry 1<br><input type="text" name="myInputs[]">
</div>
<input type="button" value="Add another text input" onClick="A.addInput(1,'dynamicInput1');">
</div>
<input type="submit" name="" value="Submit" />
</form>
</body>
</html>