DIV hiding and showing problem

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');" />

PHP:

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>

Code (markup):

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

 

Got it, nevermind