I'm trying to create a DHTML menu that has hidden submenus and expands by onclick. Every time the user clicks a different menu link from the menu the previously expanded submenu will automatically close.
I also want the menu links to change class background pictures from plus to minus when opened and minus to plus when closed.
I created 3 background images for the menu items. menu1 is a blue bar with a plus symbol, menu2 is a blue bar with a minus symbol, and submenu is a blue bar with a right arrow.
I have managed to get the image to change from plus to minus when opened, and from minus to plus when you click on another menu link, but when you click on the same menu link to close it, it does not change back from minus to plus.
I have tried a few variations but not without breaking the auto hide submenus part of the code.
Can anyone tell me what I need to add? Thanks - Brandon
It is online at [url]www.bc-multimedia.com/websites/hughesauctions/menu.html[/url] and here is the code.
<!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=utf-8" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
var Lst;
function CngClass(obj){
if (Lst) Lst.className='menu1';
obj.className='menu2';
Lst=obj;
}
var last_expanded = '';
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}
</script>
<style>
.menu1{
background-image:url(images/menu1.gif);
background-repeat:no-repeat;
display:block;
height:20px;
}
.menu2{
background-image:url(images/menu2.gif);
background-repeat:no-repeat;
display:block;
height:20px;
}
.submenu{
background-image:url(images/submenu.gif);
background-repeat:no-repeat;
display:block;
height:20px;
}
.hide{
display:none;
}
.show{
display:block;
}
</style>
</head>
<body>
<div onclick="showHide('sub1')"><a class="menu1" onclick="CngClass(this);" href="javascript:nothing()">Menu Link 1</a></div>
<span class="hide" id="sub1">
<a class="submenu" href="#">Submenu Link 1</a>
<a class="submenu" href="#">Submenu Link 2</a>
</span>
<div onclick="showHide('sub2')"><a class="menu1" onclick="CngClass(this);" href="javascript:nothing()">Menu Link 2</a></div>
<span class="hide" id="sub2">
<a class="submenu" href="#">Submenu Link 1</a>
<a class="submenu" href="#">Submenu Link 2</a>
</span>
</body>
</html>
