Hi everyone. I'm trying to hide/show DIVs, and I believe I've gotten that down. But I'm trying to get it to where once I've shown one div, I want to be able to hide it without having to show another div.

Here's my javascript.

Code:
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['divID1','divID2','divID3','divID4','divID5'];
for (var i=0;i<divs.length;i++)
  {
  if (onediv != document.getElementById(divs[i]))
    {
    document.getElementById(divs[i]).style.display='none';
    }
  }
onediv.style.display = 'block';
}
Here's my HTML:
Code:
 <div id="categoryhold">
<a href="javascript:showHide('category1');">Category 1</a><br />
<div id="category1"><a href="#">Content Line 1</a><br />
 <a href="#">Content Line 2</a><br />
 <a href="#">Content Line 3</a></div><br />

 <a href="javascript:showHide('category2');">Category 2</a><br />
<div id="category2"><a href="#">Content Line 1</a><br />
 <a href="#">Content Line 2</a><br />
 <a href="#">Content Line 3</a></div><br />

 <a href="javascript:showHide('category3');">Category 3</a><br />
<div id="category3"><a href="#">Content Line 1</a><br />
 <a href="#">Content Line 2</a><br />
 <a href="#">Content Line 3</a></div><br />

 <a href="javascript:showHide('category4');">Category 4</a><br />
<div id="category4"><a href="#">Content Line 1</a><br />
 <a href="#">Content Line 2</a><br />
 <a href="#">Content Line 3</a></div><br />

 <a href="javascript:showHide('category5');">Category 5</a></div>
<div id="category5"><a href="#">Content Line 1</a><br />
 <a href="#">Content Line 2</a><br />
 <a href="#">Content Line 3</a></div>
</div>
And my style:
Code:
#categoryhold {
	width: auto;
	height: auto;
}
#category1 {
	display: none;
}
#category2 {
	display: none;
}
#category3 {
	display: none;
}
#category4 {
	display: none;
}
#category5 {
	display: none;
}