Hiding every other sub-element

Hi, I’m having some trouble with this code, I’m not quite sure what’s wrong, but when I click the item in the combo box, nothing happens. I’ve managed to get the elements to show and hide if I specify them explicitly by name, but I have quite a few of them, so doing it explicitly would take long and be impractical.

Here’s the Javascript function I made:

[code=php]
function HideShow(what)
{
var parent = document.getElementById(“parent”);

for (i=0; i < parent.elements.length; i++)
{
current = parent.elements[i];
if (current.id == what)
{
current.style.visibility = “visible”;
}
else
{
current.style.visibility = “hidden”;
}
}
[/code]

The combobox from which it is called:

[code=html]
<select name=”showhide” id=”showhide”>
<option value=”1″ onclick=”HideShow(‘sub1’)”>Show 1</option>
<option value=”2″ onclick=”HideShow(‘sub2’)”>Show 2</option>
<option value=”3″ onclick=”HideShow(‘sub3’)”>Show 3</option>
</select>
[/code]

And the tags I’d want shown and hidden would be structured like this:

[code=html]
<div id=”parent”>
<div id=”sub1″ style=”visibility:hidden”>
Content.
</div>
<div id=”sub2″ style=”visibility:hidden”>
Content.
</div>
<div id=”sub3″ style=”visibility:hidden”>
Content.
</div>
</div>
[/code]

In case you didn’t understand, I want it so when that function is called, just the DIV with the ID specified in the ‘what’ parameter to be shown, and the rest to be hidden.

Thanks to anyone who can help me debug this, for some reason document.write doesn’t work in the middle of the loop, so I can’t tell what’s wrong ?.

Also in #JavaScript _↴