I have a script that shows a vertical accordion.... question is how do i get it so that if someone clicks one of the tabs, the other tab that's open closes and only reveals the one you clicked on?
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<style>
* {margin:0; padding:0; font:12px Verdana,Arial}
code {font-family:"Courier New",Courier}
#options {width:457px; margin:20px auto; text-align:right; color:#9ac1c9}
#options a {text-decoration:none; color:#9ac1c9}
#options a:hover {color:#033}
#acc {width:457px; list-style:none; color:#033; margin:0 auto 40px}
#acc h3 {width:443px; border:1px solid #9ac1c9; padding:6px 6px 8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
#acc h3:hover {background:url(images/header_over.gif)}
#acc .acc-section {overflow:hidden; background:#fff}
#acc .acc-content {width:425px; padding:15px; border:1px solid #9ac1c9; border-top:none; background:#fff}
#nested {width:425px; list-style:none; color:#033; margin-bottom:15px}
#nested h3 {width:411px; border:1px solid #9ac1c9; padding:6px 6px 8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
#nested h3:hover {background:url(images/header_over.gif)}
#nested .acc-section {overflow:hidden; background:#fff}
#nested .acc-content {width:393px; padding:15px; border:1px solid #9ac1c9; border-top:none; background:#fff}
#nested .acc-selected {background:url(images/header_over.gif)}
</style>
<body>
<script>
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.accordion=function(){
function slider(n){this.n=n; this.a=[]}
slider.prototype.init=function(t,e,m,o,k){
var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0;
for(i;i<l;i++){
var v=n[i];
if(v.nodeType!=3){
this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
if(o==s){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1} s++
}
}
this.l=s
};
slider.prototype.pr=function(f,d){
for(var i=0;i<this.l;i++){
var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t);
if((k!=1&&c.d==-1)&&(f==1||i==d)){
c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
}else if(k>0&&(f==-1||this.m||i==d)){
c.d=-1; h.className=''; su(c,-1)
}
}
};
function su(c){c.t=setInterval(function(){sl(c)},20)};
function sl(c){
var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/5)*c.d)+'px';
c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)}
};
return{slider:slider}
}();
</script>
<ul class="acc" id="acc">
<li>
<h3 class="0">header1</h3>
<div class="acc-section" style="height: auto; ">
<div class="acc-content">
<ul class="acc" id="nested">
<li> </li>
<li> </li>
<li>Some random text here</li></ul></div>
</div>
</li><li>
<h3>header2</h3>
<div class="acc-section" style="height: 0px; ">
<div class="acc-content">
some random text</div>
</div>
</li>
<li>
<h3>header3</h3>
<div class="acc-section" style="height: 0px; ">
<div class="acc-content">
random text here<br>
</div>
</div>
</li>
<li> </li>
<li>
<h3>header4</h3>
<div class="acc-section" style="height: 0px; ">
<div class="acc-content">Some random text here
</div>
</div>
</li>
</ul>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,0);
var nestedAccordion=new TINY.accordion.slider("nestedAccordion");
nestedAccordion.init("nested","h3",1,-1,"acc-selected");
</script>
</body></html>
