In a function, I want to reset a class style to default before reassigning it.

[gritsman]

I have the following bit of code. Around line 20 is the code I am using to 'unhide' various tables based upon a drop down selection. The problem I am running into is the tables are overlapping each other (they're all set to appear at the same fixed spot) so after I select the last option in the drop down, I can't see the upper selection's tables anymore. Make sense? I need a snippet of code, probably inserted above line 22 that will reset the visibility to default (hidden) prior to revealing the currently selected options table. Is this something I could have some assistance with?
Thanks.

<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:lightgreen}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:fixed;
left:20px;
top:50px;
visibility:hidden;
}
</style>
<script type="text/javascript">

function showmenu()
{
 y=document.forms[0].list.value;
 document.getElementById(y).style.visibility="visible";
}
</script>

</head>
<body>

<form>
<select  id="list" onchange="showmenu()">
<option value="nada"> --select a field--
<option value="plants">Plants, hydro, etc.
<option value="fish">Trout Fishing
<option value="cpu">Networking, Internet, Linux whatnot
</select>
</form>
<table class="menu" ID="plants" width=35%">
<th>Plants, Hydro, etc.</th>
<tr>
<td><a href="http://southerexposure.com/index.html">Southern Exposure Seed Exchange</a></td></tr>
<tr>
<td><a href="http://www.groworganic.com">Strawberry Bareroot Supplier</a></td></tr>
</table>
<table class="menu" ID="fish" width=35%">
<th>Stuff About Fishing</th>
<tr>
<td><a href="http://www.ncwrc.org">NC Wildlife Resources Commision</a></td></tr>
<tr>
<td><a href="http://www.digital-topo-maps.com">Topo Maps</a></td></tr>
</table>
<table class="menu" ID="cpu" width=35%">
<th>Computer, Linux, Whatnot. . . </th>
<tr>
<td><a href="http://www.aboutdebian.com">About Debian</a></td></tr>
<tr>
<td><a href="http://www.newegg.com">New Egg</a></td></tr>
</table>
</body>
</html>

[drhowarddrfine]

Dormilich,
I think this is a js question, not css.

[Dormilich]

if you say so … but when I read about visibility and overlapping (and only 2 lines of JS barely doing anything difficult) it sounds like a layout problem, hence CSS.

btw. I can’t move it back whatsoever

[gritsman]

the overlapping is intentional.
the visibility is a switch, which is javascript.(i can hide them, I can reveal them, just can't get the switch to work)
I should have stated in the original post that I was after a javascript solution. My mistake. I'm still getting the hang of the forum.

[Dormilich]

do you reset the visibility, when you select another table?

[gritsman]

Yes that is what I want to do. I want to reset the visibility of all the tables back to hidden then change only the visibility of the selected table to visible.
The javascript at lines 22-23 turns an individual tables visibility on, but I don't know how to reset the visibility first.

[gritsman]

Okay I made a solution that works. Not sure this is the most efficient way to make it work, but I'm trying.
Anyway, here is the corrected function that works:
[code=javascript]
<script type="text/javascript">
var x;
function showmenu()
{
y=document.form s[0].list.value;
if(x==null)
{x=y}
if (x!=y)
{
document.getEle mentById(x).sty le.visibility=" hidden";
document.getEle mentById(y).sty le.visibility=" visible";
x=y;
}
else
{
document.getEle mentById(y).sty le.visibility=" visible";
x=y;
}
}
[/code]

Thanks for your time, Dormilich