Show and hide on the same click

[timplx]

Hello all,
New to javascript and have never worked with programming languages like c++, so my logic in some of these statements might be incorrect or redundant

Got a problem with my page...
using java and external css to show/hide items on the same click.
I found a script that uses the getElementById function to adjust the display style of a div id. I have utilized this to show four ids in the same space on my page. Some ids start with the display:none; position:absolu te; inside a position relative tag so that each id shows in exactly the same spot on a centered page.
On click of button1, id "two" should show. Then on click of button2, button1text should be hidden, while button2 shows. In firefox and chrome, I was able to have the ids show on top of each other but not clear the existing data from the area. So if button4 first, then 2, 3, and 1 were clicked, you can only see the information from button 4 and will never see the info from 2,3, and 1. In IE, this information shows in a different place than in firefox or chrome.

Basically, I want only the id that is clicked to show when that button is clicked. I am having a hard time getting the other ids to hide when the other buttons are clicked. When "button1" is clicked, show "button1tex t" hide "button2tex t, button3text, button4text"

Any help is appreciated.
Thanks

Tim

#zero{
position: relative;
left:0px;
top:0px;
}
#one,#two,#three,#four,#five {
	display:none;
	left:0px;
	position:absolute;
	width:785px;
	height:330px;
	overflow:scroll;
	padding:10px;
	background-color:#ffffff;
	text-align:justify;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
} 
#six,#seven,#eight,#nine{
	Width:87px;
	Height:23px;
	text-align:center;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	position:relative;
	top:4px;
	vertical-align: middle;
	font-style: italic;
}

<script type="text/javascript"> 
var d=0; 
var id=new Array(); 
id[0]="one"; 
id[1]="two"; 
id[2]="three"; 
id[3]="four"; 
id[4]="five"; 
id[5]="ten"
function displayButton1() { 
if(document.getElementById(id[1]).style.display=="") { 
document.getElementById(id[1]).style.display=""; 
document.getElementById(id[1]).style.display="block"; 
document.getElementById(id[5]).style.display="none";
if(d>5) { 
document.getElementById(id[1]).style.display="";
document.getElementById(id[4]).style.display="none";
document.getElementById(id[2]).style.display="none";
document.getElementById(id[3]).style.display="none";
} }
else { 
document.getElementById(id[1]).style.display="";
document.getElementById(id[5]).style.display="" ;
document.getElementById(id[4]).style.display="none";
document.getElementById(id[2]).style.display="none";
document.getElementById(id[3]).style.display="none";
} d=1; if(d=1) { 
d=5; } } 
function displayButton2() { 
if(document.getElementById(id[2]).style.display=="") { 
document.getElementById(id[2]).style.display=""; 
document.getElementById(id[2]).style.display="block";
document.getElementById(id[5]).style.display="none"; 
if(d>5) { 
document.getElementById(id[2]).style.display=""; } }
else { 
document.getElementById(id[2]).style.display="";
document.getElementById(id[5]).style.display="" ;
document.getElementById(id[4]).style.display="none";
document.getElementById(id[3]).style.display="none";
document.getElementById(id[1]).style.display="none";
} d=2; if(d=2) { 
d=5; } 
}
function displayButton3() { 
if(document.getElementById(id[3]).style.display=="") { 
document.getElementById(id[3]).style.display=""; 
document.getElementById(id[3]).style.display="block"; 
document.getElementById(id[5]).style.display="none";
if(d>5) {
document.getElementById(id[3]).style.display=""; } } 
else { 
document.getElementById(id[3]).style.display="";
document.getElementById(id[5]).style.display="" ;
document.getElementById(id[4]).style.display="none";
document.getElementById(id[2]).style.display="none";
document.getElementById(id[1]).style.display="none";}
d=3; if(d=3) { 
d=5; } } 
function displayButton4() { 
if(document.getElementById(id[4]).style.display=="") {
document.getElementById(id[4]).style.display=""; 
document.getElementById(id[4]).style.display="block";
document.getElementById(id[5]).style.display="none";
if(d>5) {
document.getElementById(id[4]).style.display=""; 
} } 
else { 
document.getElementById(id[4]).style.display="";
document.getElementById(id[5]).style.display="" ;
document.getElementById(id[3]).style.display="none";
document.getElementById(id[2]).style.display="none";
document.getElementById(id[1]).style.display="none";} 
d=4; if(d=4) { 
d=5; } }
</script>
<body>
<table>
<tr>
<TD width="87" valign="middle" onMouseOver="style.cursor='pointer'"><div id="six" onclick="displayButton1();">button1</div></TD>
<TD width="87" valign="middle" onMouseOver="style.cursor='pointer'" ><div id="seven" onClick="displayButton2();">button2</div></TD>
<TD width="87" valign="middle" onMouseOver="style.cursor='pointer'"><div id="eight" onClick="displayButton3();">button3</div></TD>
<TD width="87" valign="middle" onMouseOver="style.cursor='pointer'"><div id="nine" onClick="displayButton4();">button4</div></TD>
</tr>
<tr>
<td><div id="zero"
<div id="two" >button1 text</div>
<div id="three" >button2 text</div>
<div id="four" >button3 text</div>
<div id="five" >button4 text</div>
<div id="ten" >&nbsp</div></div>
</td>
</tr>
</table>

[acoder]

Instead of all that code, create one function and pass the number as a parameter, e.g.

function displayButton(num) {
    if (document.getElementById(id[num]).style.display=="") { 
        document.getElementById(id[num]).style.display="block"; 
...

[timplx]

I took out some code, but the individual buttons do not close the other divs. The idea is that when button1 is clicked, if button2 text, button3 text, or button4 text is open, they close. With my current version, when button 4 text is open, you can click button1 all you want and it will not display because button4 text is open. I need button1 to close button4.

[altonator]

function displayButton(num) {
    //first, hide all of the other stuff (actually, just hide everything, it's far easier)
    for(id_to_hide in id)//cycle through all of the elements in the 'id' array
        document.getElementById(id_to_hide).style.display = 'none';
    //and now unhide the one that you want to be visible
    document.getElementById(id[num]).style.display="block"; 
}