[RESOLVED] Show one div while hiding itself

[Tibneo]

hi everyone. right now i'm working on my personal portfolio website and am trying to set it up so that i can click on one image, a div shows, and the div that the image clicked was in is hidden. that way, only one div will be up at all times. the new div will then in turn be able to show the original div.

my javascript isnt the best it could be, but what i want it to do is that when a category from div#home is clicked, div#home is hidden, while the clicked category is shown. then there will be an option to show div#home again while hiding the category again.


javascript

function showHide(d){
 var div = document.getElementById(d);
 if (showHide.div&&div!=showHide.div){
  showHide.div.style.display='none';
 }
 div.style.display = div.style.display != 'block'?'block':'none';
 showHide.div=div;
}

html

<div id="holder"><div id="home">
<a href="javascript:show(category_one)"><img src=""><img></a>
<a href="javascript:show(category_two)"><img src=""><img></a>
<a href="javascript:show(category_three)"><img src=""><img></a>
<a href="javascript:show(category_four)"><img src=""><img></a>
<a href="javascript:show(category_five)"><img src=""><img></a>
</div>
<div id="category_one">
<a href="javascript:show(home);"><img src=""><img></a>
<a href="item1"><img src=""><img></a>
<a href="item2"><img src=""><img></a>
<a href="item3"><img src=""><img></a>
<a href="item4"><img src=""><img></a>
<a href="item5"><img src=""><img></a>
</div>
<div id="category_two">
<a href="javascript:show(home);"><img src=""><img></a>
<a href="item1"><img src=""><img></a>
<a href="item2"><img src=""><img></a>
<a href="item3"><img src=""><img></a>
<a href="item4"><img src=""><img></a>
<a href="item5"><img src=""><img></a>
</div>
<div id="category_three">
<a href="javascript:show(home);"><img src=""><img></a>
<a href="item1"><img src=""><img></a>
<a href="item2"><img src=""><img></a>
<a href="item3"><img src=""><img></a>
<a href="item4"><img src=""><img></a>
<a href="item5"><img src=""><img></a>
</div>
<div id="category_four">
<a href="javascript:show(home);"><img src=""><img></a>
<a href="item1"><img src=""><img></a>
<a href="item2"><img src=""><img></a>
<a href="item3"><img src=""><img></a>
<a href="item4"><img src=""><img></a>
<a href="item5"><img src=""><img></a>
</div>
<div id="category_five">
<a href="javascript:show(home);"><img src=""><img></a>
<a href="item1"><img src=""><img></a>
<a href="item2"><img src=""><img></a>
<a href="item3"><img src=""><img></a>
<a href="item4"><img src=""><img></a>
<a href="item5"><img src=""><img></a>
</div></div>

can i add a "javascript:hide(category_id)" to the end of them or will i have to edit the code? im pretty new to javascript, so any help would be greatly appreciated.