Show/Hide Multiple Layers - Need Help

**duuuuuuuuuude** · 10-21-2011, 09:20 AM

Hello,

I'm working on a top menu consisting of MENU A, MENU B and MENU C each with it's own drop down submenu on a separate layer. I'm using ShowContent and HideContent to display the submenus onmouseover. So on mouseover it shows "LayerA" and hides "LayerB" and "LayerC."

The problem I'm having is that it will only hide one of the layers. Which ever one is listed first. I'm sure the problem lies in HideContent('LayerB','LayerC') but I don't know how to resolve it. Any help would be much appreciated.

Here is the script I'm using:

And here is my menu:

**vwphillips** · 10-22-2011, 08:13 AM

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" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
function HideContent() {
 var args=HideContent.arguments,obj,z0=0;
 for (var z0=0;z0<args.length;z0++){
  obj=document.getElementById(args[z0]);
  if (obj){
   obj.style.display = "none";
  }
 }
}

function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}

function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
/*]]>*/
</script>

</head>

<body>
<table>
 <tr>
    <td><a href="XXXX" onmouseover="ShowContent('LayerA'); HideContent('LayerB','LayerC')">MENU A</a>
    </td>
    <td><a href="XXXX" onmouseover="ShowContent('LayerB'); HideContent('LayerA','LayerC')">MENU B</a>
    </td>
    <td><a href="XXXX" onmouseover="ShowContent('LayerC'); HideContent('LayerA','LayerB')">MENU C</a>
    </td>
</table>

 </tr>
 <div id="LayerA" style="width:200px;height:200px;background-Color:red;"></div>
 <div id="LayerB" style="width:200px;height:200px;background-Color:green;"></div>
 <div id="LayerC" style="width:200px;height:200px;background-Color:blue;"></div>

</body>

</html>

Thread: Show/Hide Multiple Layers - Need Help

Thread Tools

Search Thread

Show/Hide Multiple Layers - Need Help

Bookmarks

Bookmarks

Posting Permissions