Help with showing/hiding layers.

[Ridiql]

Hi
I've been trying to get this to work for so long now that I'm going nuts.

I've created several different scripts and tried to copy-paste a couple of others. Nothing seems to work. I'm kind of a rookie here, so bear with me.

I'm working on a page with many layers on it. and with a click on one of my menu-buttons, I want to hide all layers except the one associated with the menubutton.

As an example, the primary layer that is visible from the beginning is called "homeLayer". When I click on the menu-button "News" I want to hide "homeLayer" and show "newsLayer".

Here's the javascript I tried most recently:

layers=new Array(3)
layers[0]="homeLayer"
layers[1]="newsLayer"
layers[2]="aboutLayer"
layers[3]="d"
layers[4]="e"
layers[5]="f"
layers[6]="g"

function hideAllExcept(elm) {
for (var i = 0; i < layers.length; i++) {
var layer = document.getElementById(states[i]);
if (elm!= layers[i]) {
layer.style.display = "none";
}
else {
layer.style.display = "block";
}
}
}

and the divs:

<tr>
<td width="123" height="32" align="center" id="FirstButt"><ul id="MenuBar5" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Home</a>
<ul>
<li><a href="#" id="SubMenuNews"><div onclick="hideAllExcept(newsLayer)">News</div></a></li>
</ul>
</li>
</ul></td>
<td width="125" height="32" align="center" bgcolor="#663300" id="SecondButt"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Info</a>
<ul>
<li><a href="#" id="SubMenuAbout"><div onclick="hideAllExcept(aboutLayer)">About</div></a></li>
...

[daveVk]

I don't see mention of "states" anywhere else should

var layer = document.getElementById(states[i]);

be

var layer = document.getElementById(layers[i]);

[Fotiman]

First, you are creating an array with 3 items, then adding more than 3 items to it. A slightly more efficient method would be:

var layers = [
  "homeLayer",
  "newsLayer",
  "aboutLayer",
  "d",
  "e",
  "f",
  "g"
];

Next, you've got some invalid HTML. You can't have a <div> inside an <a>. But also, your onclick handler that calls hideAllExcept is missing quotes.

<div onclick="hideAllExcept(newsLayer)">News</div>
<div onclick="hideAllExcept(aboutLayer)">About</div>

Those should be:

<div onclick="hideAllExcept('newsLayer')">News</div>
<div onclick="hideAllExcept('aboutLayer')">About</div>

Your hideAllExcept method is now taking a string, so the comparison of elm and layers[i] will now work. I'm not sure what your 'states' array is, but I suspect that correcting your HTML will fix the issue.

I hope this helps.