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:
In body:
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!
Here's what I have:
In head:
Code:
<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>In body:
Code:
<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="#"> -Page 1</a></li>
<li><a href="#"> -Page 2</a></li>
<li><a href="#"> -Page 3</a></li>
</ul>
</dd>
</dl>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!
