Tree menu?

[Poop_Shoot]

I have asked this question before but somehow I've forgotten the answer! Basically I only want one of the tree menus to be alowwed open at once? Rather than all of them? It is really making me mad because it is so simple I know it?

function bttnInfo(tog){
d=document.getElementById(tog);
with(d){
className=(className=="hide" )?"disp":"hide";
}
}

<style>
.hide{display:none;}
.disp{display:block;}
</style>


<form name="frm">
<table cellpadding="1">
<tr>
<td class="text">
Learning Bar
</td>
</tr>
<tr>
<td>
<input type="button" value="html" id="button1" onclick="bttnInfo('menu0');" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" class="btn">
<span class="hide" id="menu0">
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" >
</span>
</td>
</tr>
<tr>
<td>
<input type="button" value="css" id="button2" onclick="bttnInfo('menu1'); " onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" class="btn">
<span class="hide" id="menu1">
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" >
</span>
</td>
</tr>
<tr>
<td>
<input type="button" value="javascript" id="button3" onclick="bttnInfo('menu2')" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" class="btn">
<span class="hide" id="menu2">
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" >
</span>
</td>
</tr>
<tr>
<td>
<input type="button" value="vbscript" id="button4" onclick="bttnInfo('menu3')" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" class="btn">
<span class="hide" id="menu3">
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" >
</span>
</td>
</tr>
<tr>
<td>
<input type="button" value="asp" id="button1" onclick="bttnInfo('menu4')" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" class="btn">
<span class="hide" id="menu4">
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" >
</span>
</td>
</tr>
<tr>
<td>
<input type="button" value="development" id="button2" onclick="bttnInfo('menu5')" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" class="btn">
<span class="hide" id="menu5">
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" >
</span>
</td>
</tr>
<tr>
<td>
<input type="button" value="links" id="button3" onclick="bttnInfo('menu6')" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" class="btn">
<span class="hide" id="menu6">
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" ><br>
<input type="button" value="subMenu" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" >
</span>
</td>
</tr>
<tr>
<td>
<input type="button" value="forums" id="button4" onclick="bttnInfo('menu7')" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" class="btn" title="Helpfull Development Forums!">
<span class="hide" id="menu7">
<input type="button" value="SitePoint" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" title="My Favorite Forum Very Helpfull They Are #1!"><br>
<input type="button" value="CodingForums" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" title="Another Very Good Forum!"><br>
<input type="button" value="WebXpertz" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" title="Freindly helpfull advice!"><br>
<input type="button" value="DevShed" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" title="Another Design Forum!"><br>
<input type="button" value="EchoEcho" class="sub" onmouseover=" transbutton(this, 1)" onmouseout=" transbutton(this, 0)" title="Another Design Forum!" >
</span>
</td>
</tr>
</table>
</form>

[awestmoreland]

Any chance you can send us to an online version that's formatted nicely? I started with that lot, but couldn't be bothered

[Poop_Shoot]

I have stumble upon the answer while reading a post by beetle here!
http://www.sitepointforums.com/showt...hreadid=127788

Not to gracefulll! Anyways here it tiz:

function bttnInfo(ele){
   var d=document.getElementById(ele);
   var i=0,obj;
		 while(obj=document.getElementsByTagName("span").item(i++)){
			with(obj){
				if(id==ele){
				  with(d){
				  className=(className=="hide")?"disp":"hide";
				  }
				}
				else{
				  className="hide"
				}
			}
		}
  }