Javascript hiding layers with certain name

Javascript hiding layers with name starting with "btn_"?

[Mobull]

I have a page which contains buttons with a mouse-over and mousedown effects. These effects are pretty easy to create. I added an extra layer with an alternate state of the mouse-over and out buttons.
With a show-hide function it's easy to exchange these layers and with an "If-Else" question it's pretty easy to see if the layer is active (visible) or not.

this is nice for just one button....but as you guessed I want several buttons. 12 or even more in total. I would like to build some sort of loop which checks the states of all buttons to uncheck them and to check the one that was pressed (and was inactive before).
What I thought:
I name all the buttons "btn_?", so the first 4 characters of buttons are always the same. Then I want to search for all the layers where the names start with "btn_" and change all their statusses to inactive, except for the one that was pressed.

as example, this is how I change one button:
------------------------------------------------
in the HTML code:
<div id="btnProduct" name="btnProduct" onclick="showHide('btnProductSlctd', 'btnProduct');></div>
<div id="btnProductSlctd" name="btnProductSlctd" style="visibility:hidden" onclick="showHide('btnProductSlctd','btnProduct');">.</div>

in the stylesheet:
#btnProduct{position:absolute; top:0px; left:0px;}
#btnProductSlctd{position:absolute; top:0px; left:0px;}

(So both layers are on top of eachother)

in my javascript.js file:
function showHide(show, hide){
alert;

if (document.all[show].style.visibility='hidden')
{
document.all[hide].style.visibility='hidden';
document.all[show].style.visibility='visible';
}

My question in short is thus:
How can I change the state of [u]all buttons[/u] to "Unselected" except the one which is pressed?

btw...this is my first post here, but I've been reading these forums last two weeks very often. Some wonderful helpful information here! Thanks in advance.

[Purple Martin]

At the start of the function, hard-code changing ALL the buttons to unselected. Then leave in the bit of code that changes one of them to selected.

[Mobull]

So there's no way I could make a function do this for me? It would have been nice to add buttons without having to change the Javascript.
Thanks for you help. I think I will do it like you said.

[andreew]

You could create an array with all the names of the buttons and loop through the array hiding each button in the array. That way all you have to do when you add a button is add the name to the array. Something like this.

function hidebuttons(elementid){

buttons = new Array("btnProduct", "btn_?", "btn_?");

for(var i=0;i<buttons.length;i++){

document.buttons[i].style.visibility="hidden";

}

document.getElementById(elementid).style.visiblity="visible";

}

[CIAimages]

I have a problem which is very similar but in opposite

<script type="text/javascript">
var HelpStatus = 0;
function hideshowHelp(which,act)
{
if (which.style.display == "")
{
which.style.display = "none"
if(act == 'help')
{
HelpStatus = 1;
}
}
else
{
which.style.display = ""
if(act == 'help')
{
HelpStatus = 0;
}
}
}
</script>

I call my script w/ onClick="hideshowHelp(document.getElementById('help1'),'help'); return false"

and my div is

<div align="right" id="help1" style="visibility: visible;">
some stuff here
</div>

My problem is that it woks great BUT when the page is loaded the div is visible and it is hidded on click well I want the opposit to be when the page load no div on click here it is.

any idea what to do?