DotNetGnat
Programmer
Guys,
I am using the following code that I found online for creating an accordion. It works fine but I want a way to navigate from tab 1 to tab 2 and from tab2 to tab3. I mean on tab1, I want to have a link/button/anchor that when clicked activates and opens tab2 and similarly on tab 2 I want a link that activates tab3. The actual reason for this is: I have a form on tab 1 that I need to validate and then only proceed the user to tab 2. My validate function returns true or false. If it is true I want to activate tab 2.
Below is the code in the simplest format.
thanks in advance
-DNG
I am using the following code that I found online for creating an accordion. It works fine but I want a way to navigate from tab 1 to tab 2 and from tab2 to tab3. I mean on tab1, I want to have a link/button/anchor that when clicked activates and opens tab2 and similarly on tab 2 I want a link that activates tab3. The actual reason for this is: I have a form on tab 1 that I need to validate and then only proceed the user to tab 2. My validate function returns true or false. If it is true I want to activate tab 2.
Below is the code in the simplest format.
Code:
HTML
______
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="accordion">
<dl class="accordion" id="slider">
<dt>Tab 1</dt>
<dd>
<span>
Content Tab 1
</span>
</dd>
<dt>Tab 2</dt>
<dd>
<span>
Content - Tab 2
</span>
</dd>
<dt>Tab 3</dt>
<dd>
<span>
Content Tab 3
</span>
</dd>
</dl>
</div>
<script type="text/javascript">
var slider1=new accordion.slider("slider1");
slider1.init("slider",0, "open");
</script>
</body>
</html>
Code:
JS
____
var accordion=function(){
var tm=sp=10;
function slider(n){this.nm=n; this.arr=[]}
slider.prototype.init=function(t,c,k){
var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:'';
h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length;
for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}}
l=s.length;
for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}}
}
slider.prototype.pro=function(d){
for(var i=0;i<this.l;i++){
var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm);
if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl}
else if(s.style.display==''){su(s,-1); h.className=''}
}
}
function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)}
function sl(c,f){
var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px';
c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')';
if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)}
}
return{slider:slider}
}();
Code:
css
____
* {margin:0; padding:0}
#accordion {width:459px; margin:50px auto}
.accordion {width:459px; font:12px Verdana,Arial; color:#033}
.accordion dt {width:439px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
.accordion dt:hover {background:url(images/header_over.gif)}
.accordion dd {overflow:hidden; background:#fff}
.accordion span {display:block; width:425px; border:2px solid #9ac1c9; border-top:none; padding:15px}thanks in advance
-DNG