Need JS Help with Tree Menu

Discussion in 'JavaScript' started by Phaethon, Jun 18, 2008.

  1. #1
    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, Jun 18, 2008 IP
  2. gezzle

    gezzle Peon

    Messages:
    108
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    gezzle, Jul 1, 2008 IP
  3. koolman

    koolman Peon

    Messages:
    76
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    koolman, Jul 1, 2008 IP