Need JS Help with Tree Menu

Hello all. I need a bit of help with some JS code. I don't really know it all that well, just enough to get by. Here's what I need. Basically I want a vertical tree menu that onclick shows sub items and onclick again it hides them. Also I want a little plus button and minus button to toggle when the list shows/hides. I've been attempting to do this from my limited knowledge, but it is not working properly.

Here's what I have:

In head:

<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('category'+i)) {document.getElementById('category'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

Code (markup):

In body:

<dt onclick="javascript:show('category1');"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/plusbutton.gif" onclick="this.src='<?php bloginfo('template_url'); ?>/images/minusbutton.gif'" border=0 /> Category 1</a></dt>
		<dd id="category1">
				<ul>
					<li><a href="#">&nbsp; -Page 1</a></li>
					<li><a href="#">&nbsp; -Page 2</a></li>
					<li><a href="#">&nbsp; -Page 3</a></li>
				</ul>
		</dd>
</dl>

Code (markup):

As you can see, I am not really sure about how to "hide" everything and how to toggle the image. Any help is very appreciated!

 

phaethon,
sorry for this late late post, am just going through the archives, why don't u use the YUI library?

http://developer.yahoo.com/yui/treeview/

 

Unless you want to learn how to make a treeview, you may use YUI Treeview or any other.
If you are using PHP and need to render treeview from server-side, you may have a look at KoolTreeView
See the demo : http://www.koolphp.net/support/demos/#kooltreeview.example_treeview_basic
Free download: http://www.koolphp.net/?mod=download