Hi there!
I'm hoping somebody can help me solve my javascript problem. I found a tutorial on the web about collapsible menus - a menu made up of a series of nodes that, when opened, display a sub menu. The problem I have is that when you click to open a menu item, I want it to close all of the other menu items that are open - i.e. there can only be one menu item open at a time. This is the HTML with Java Script in it that I'm using as a basis:
<!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"
>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function switchit(list){
var listElementStyle=document.
getElement
ById(list)
.style;
if (listElementStyle.display=
="none"){
listElementStyle.display="
block";
else {
listElementStyle.display="
none";
}
}
</script>
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="menul">
<li> <a href="javascript:toggle('t
utorioli')
">About us</a> </li>
<li id="tutorioli">
<ul class="hbutton">
<li><a href="
http://www.tutorio.com/">Testi
monials</a
></li>
<li><a href="
http://www.tutorio.com/webmaster/1-Announcements">
Announceme
nts.</a> </li>
<li><a href="
http://www.tutorio.com/webmaster/5-Featured">Our People & Values</a> </li>
<li><a href="
http://www.tutorio.com/webmaster/6-Linkage">Linkag
e.</a> </li>
</ul></li>
<p></p>
<li> <a href="javascript:toggle('t
utorialsli
')">Tutori
als</a></l
i>
<li id="tutorialsli">
<ul class="hbutton"><li><a href="
http://www.tutorio.com/webmaster-tutorials/">View All</a></li>
<li><a href="
http://www.tutorio.com/free/11-Clientside-tutorials">Clients
ide.</a></
li>
<li><a href="
http://www.tutorio.com/free/7-Flash-tutorials">Fla
sh.</a></l
i><li><a href="
http://www.tutorio.com/free/10-Marketing-SEO-tutorials">Mark
eting-SEO.
</a></li>
<li><a href="
http://www.tutorio.com/free/8-Photoshop-tutorials"
>Photoshop
.</a></li>
<li><a href="
http://www.tutorio.com/free/9-Serverside-tutorials">Serversi
de.</a> </li>
</ul>
</li>
</ul>
<script type="text/javascript">
document.getElementById('m
enul').sty
le.listSty
le="none";
document.getElementById('t
utorioli')
.style.dis
play="none
"; // collapse list
document.getElementById('t
utorialsli
').style.d
isplay="no
ne"; // collapse list
function toggle(list){
var listElementStyle=document.
getElement
ById(list)
.style;
if (listElementStyle.display=
="none"){
listElementStyle.display="
block";
}
else{ listElementStyle.display="
none";
}
} </script>
</body>
</html>
So just to reiterate the idea is that when you open "About Us" to expand it, then click "Tutorials", the "About us" submenu items will close.
Many thanks,
Data99
Start Free Trial
