DIV hiding and showing problem

[StealthRT]

Hello all i am having some problems with hiding some DIV's and showing them when a user clicks on a button.

I have 8 buttons:

<input name="Product1" type="button" value="Breakfast" onclick="showhide('proItems1');showhide('proItems2');showhide('proItems3');showhide('proItems4');showhide('proItems5');showhide('proItems6');showhide('proItems7');showhide('proItems8');" />
<input name="Product2" type="button" value="Classics" onclick="showhide('proItems2');showhide('proItems1');showhide('proItems3');showhide('proItems4');showhide('proItems5');showhide('proItems6');showhide('proItems7');showhide('proItems8');" />
<input name="Product3" type="button" value="Deserts" onclick="showhide('proItems3');showhide('proItems1');showhide('proItems2');showhide('proItems4');showhide('proItems5');showhide('proItems6');showhide('proItems7');showhide('proItems8');" />
<input name="Product4" type="button" value="Salads" onclick="showhide('proItems4');showhide('proItems1');showhide('proItems2');showhide('proItems3');showhide('proItems5');showhide('proItems6');showhide('proItems7');showhide('proItems8');" />
<br />
<input name="Product5" type="button" value="Sides" onclick="showhide('proItems5');showhide('proItems1');showhide('proItems2');showhide('proItems3');showhide('proItems4');showhide('proItems6');showhide('proItems7');showhide('proItems8');" />
<input name="Product6" type="button" value="Dressing/Sauces" onclick="showhide('proItems6');showhide('proItems1');showhide('proItems2');showhide('proItems3');showhide('proItems4');showhide('proItems5');showhide('proItems7');showhide('proItems8');" />
<input name="Product7" type="button" value="Condiments" onclick="showhide('proItems7');showhide('proItems1');showhide('proItems2');showhide('proItems3');showhide('proItems4');showhide('proItems5');showhide('proItems6');showhide('proItems8');" />
<input name="Product8" type="button" value="Drinks" onclick="showhide('proItems8');showhide('proItems1');showhide('proItems2');showhide('proItems3');showhide('proItems4');showhide('proItems5');showhide('proItems6');showhide('proItems7');" />

I need each button to hide the other DIVs. Like the first button needs to show 'proItems1' and hide all other Div's (proItems2-8). Right now it seems to show all the items with one DIV not showing.

This is the javascript:

<script language="javascript">
var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
</script>


What can i do to just hide the DIV's that i need to hide and only show one that needs to be showed for each button?

David

[StealthRT]

Got it, nevermind :)