HTML Help

jillbalkus · Joined: 12 Jul 2007 Posts: 1

I have this expanding DHTML menu as shown in the code below.

The Problem is when I click on the links that have submenus, the submenus don't stay visible. They collapse right away.

Any way to keep them visible once clicked?

Code:
<script language="JavaScript" type="text/JavaScript">

</script>

<style type="text/css">
.menu1{
display:inline;
}
.submenu{
display: block;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>

<table width="191" cellpadding="0" cellspacing="0">
<tr>
<td><br><a href="index.php"><img src="images/barcelona_bath_and_body.gif" alt="Barcelona Bath and Body - Fragrant Candles, Soaps, and Room Refresh Spray" width="191" height="116" border="0" title="Barcelona Bath and Body - Fragrant Candles, Soaps, and Room Refresh Spray"></a>

<img src="images/new_navigation_01.gif" width="191" height="35" alt=""><br>

<img src="images/new_navigation_02.gif" width="191" height="25" alt="SHOP BY PRODUCT"><br>
<a href="soap.php"><img src="images/new_navigation_03.gif" alt="Soap" width="191" height="25" border="0"><br></a>
<a href="candles.php"><img src="images/new_navigation_04.gif" alt="Candles" width="191" height="25" border="0"><br></a>
<a href="roomrefresh.php"><img src="images/new_navigation_05.gif" alt="Room Refresh" width="191" height="25" border="0"><br></a>
<a href="sachets.php"><img src="images/new_navigation_06.gif" alt="Sachets" width="191" height="25" border="0"><br></a>

<a href="fragrances2.php" class="menu1" onclick="showHide('mymenu1')"><img src="images/new_navigation_16.gif" alt="SHOP BY FRAGRANCE" width="191" height="25" border="0"></a><br>
<div id="mymenu1" class="hide">
<a href="cinnamon.php" class="submenu"><img src="images/new_navigation_17.gif" alt="Cinnamon Sandalwood" width="191" height="25" border="0"><br></a>
<a href="grapefruit.php" class="submenu"><img src="images/new_navigation_18.gif" alt="Grapefruit Ylang Ylang" width="191" height="25" border="0"><br></a>
<a href="vanilla.php" class="submenu"><img src="images/new_navigation_19.gif" alt="Vanilla Lavender" width="191" height="25" border="0"><br></a>
<a href="lemongrass.php" class="submenu"><img src="images/new_navigation_20.gif" alt="Lemongrass Fennel" width="191" height="25" border="0"><br></a>
<a href="coconut.php" class="submenu"><img src="images/new_navigation_21.gif" alt="Coconut Bay Rum" width="191" height="25" border="0"><br></a>
</div>

<a href="gifts.php" class="menu1" onclick="showHide('mymenu2')"><img src="images/new_navigation_07.gif" alt="GIFTS" width="191" height="25" border="0"></a><br>
<div id="mymenu2" class="hide">
<a href="gifts_boxedsets.php" class="submenu"><img src="images/new_navigation_08.gif" alt="Boxed Sets" width="191" height="25" border="0"><br></a>
<a href="gifts_baskets.php" class="submenu"><img src="images/new_navigation_09.gif" alt="Gift Baskets" width="191" height="25" border="0"><br></a>
<a href="gifts_under20.php" class="submenu"><img src="images/new_navigation_10.gif" alt="Gifts under $20" width="191" height="25" border="0"><br></a>
<a href="gifts_under50.php" class="submenu"><img src="images/new_navigation_11.gif" alt="Gifts under $50" width="191" height="25" border="0"><br></a>
<a href="gifts_under100.php" class="submenu"><img src="images/new_navigation_12.gif" alt="Gifts under $100" width="191" height="25" border="0"><br></a>
<a href="gifts_wedding.php" class="submenu"><img src="images/new_navigation_13.gif" alt="Host and Hostess Gifts" width="191" height="25" border="0"><br></a>
<a href="gifts_corporate.php" class="submenu"><img src="images/new_navigation_14.gif" alt="Corporate Gifts" width="191" height="25" border="0"><br></a>
<a href="gifts_wedding.php" class="submenu"><img src="images/new_navigation_15.gif" alt="Wedding Favors" width="191" height="25" border="0"><br></a>
</div>

<a href="http://ww8.aitsafe.com/cf/review.cfm?userid=A1161166"><img src="images/new_navigation_22.gif" alt="Checkout" width="191" height="25" border="0"><br></a>
<a href="companyinfo.php"><img src="images/new_navigation_23.gif" alt="About Us" width="191" height="25" border="0"><br></a>
<a href="contactus.php"><img src="images/new_navigation_24.gif" alt="Contact Us" width="191" height="25" border="0"><br></a>
<a href="raves.php"><img src="images/new_navigation_25.gif" alt="Raves and Reviews" width="191" height="25" border="0"><br></a>
<a href="article.php"><img src="images/new_navigation_26.gif" alt="Article Archive" width="191" height="25" border="0"><br></a>
<a href="resources.php"><img src="images/new_navigation_27.gif" alt="Resources" width="191" height="25" border="0"><br></a>
<a href="wholesale-info.php"><img src="images/new_navigation_28.gif" alt="Wholesale" width="191" height="25" border="0"><br></a>

<img src="images/new_navigation_29.gif" width="191" height="94" alt=""><br>
<img src="images/new_navigation_30.gif" width="191" height="31" alt=""></td>
</tr>
</table>

nikki · Joined: 24 Nov 2008 Posts: 60

Try using this code :
function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);
if(switch_id.className == 'show') {
switch_id.className = 'hide';

}else{
switch_id.className = 'show';

}
}
}