...

View Full Version : DHTML/JS Expanding Menus Help Needed



tassiedude
04-30-2006, 04:29 PM
Ok Here is the Code:

The problem is I have got the menus to expand but I need them to also retract for example when you click on work it expands, but then you click on Test and it expands by work does not contract. This is peeing me off and I have tried everything to fix, I know it is something simple but cannot pinpoint it. I have turned to here as a last resort your help is appreciated.



<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<script type='text/javascript' src='main.js'></script>
<style>
body
{color:white;background-color:steelblue;font-family:verdana;font-size:8pt;}
h1 {font-size:12pt;}
.menu {background-color:darkslategray;border-style:inset;border-width:thin;width:100px;font-weight:bold;}
a {color:white;background-color:darkslategray;text-decoration:none;width:100%;}
a.submenu {background-color:darkslategray;width:100%;}
a:hover {color:goldenrod;}
</style>

<script>
function showhide(id){
if (document.getElementById(id).style.display == 'none')
{document.getElementById(id).style.display = 'block';}
else {document.getElementById(id).style.display = 'none';}
}
</script>
</head>
<body>
<h1>Text Here</h1>
<b>Click on the Menus below</b><br />

<div class="menu"><a href="#" onclick="showhide('menu1'); return false">
Work</a></div>
<div id="menu1" class="menu" style="display: none">
<a href='#' class='submenu'>HTML Basics</a><br />
<a href='#' class='submenu'>Stylesheets </a><br />
<a href='#' class='submenu'>DHTML </a><br />
<a href='#' class='submenu'>XML </a><br />
</div>

<div class="menu"><a href="#" onclick="showhide('menu2'); return false">
Play</a></div>
<div id="menu2" class="menu" style="display: none">
<a href='#' class='submenu'>Pay Rise</a><br />
<a href='#' class='submenu'>Holiday</a><br />
<a href='#' class='submenu'>Sport </a><br />
</div>

<div class="menu"><a href="#" onclick="showhide('menu3'); return false">
Test</a></div>
<div id="menu3" class="menu" style="display: none">
<a href='#' class='submenu'>Pay Rise</a><br />
<a href='#' class='submenu'>Holiday</a><br />
<a href='#' class='submenu'>Sport </a><br />
</div>

<div class="menu"><a href="#" onclick="showhide('menu4'); return false">
Test More</a></div>
<div id="menu4" class="menu" style="display: none">
<a href='#' class='submenu'>Pay Rise</a><br />
<a href='#' class='submenu'>Holiday</a><br />
<a href='#' class='submenu'>Sport </a><br />
</div>

</body>

vwphillips
04-30-2006, 04:36 PM
<script>
var Lst;
function showhide(id){
var obj=document.getElementById(id);
if (obj.style.display == 'none')
{obj.style.display = 'block';}
else {obj.style.display = 'none';}
if (Lst){
if (Lst!=obj){
Lst.style.display = 'none';
}
}
Lst=obj;
}
</script>

tassiedude
04-30-2006, 05:12 PM
Thankyou I knew it had to be something to do with the script



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum