Help with collapsable tree

[justmike108]

I'm coding an expandable tree, with each collapsable link expanding when a plus sign is clicked, but I also want the tree to collapse when the name is clicked aswell, not just the plus sign.

eg.

[+]Explanations (want Explanations to be clickable too, not just plus sign)
----[+]Auto
....

Javascript

<script type="text/javascript" language="javascript">
function expandCollapseTree(obj){
	var li = obj.parentNode;					
	var uls = li.getElementsByTagName("ul"); 	 
	var ul = uls[0];							
	
	if (ul.style.display == "none" || ul.style.display == ""){			
		ul.style.display = "block";										
		
		obj.src = "images/minus_down.gif";				}
		
	else{
		ul.style.display = "none";										
		
		obj.src = "images/plus_down.gif";			
	}	
}

function swapImage(image){
	var source = image.getAttribute("src");								
	
	if (source.indexOf("_up") !=-1){									
		source = source.replace("_up", "_down");		
	}
	
	else{
		source = source.replace("_down", "_up");			
	}
	
	image.setAttribute ("src", source);
}

HTML

<div id="treemenu">
    <ul id = "tree">
      <li><img src="images/plus_up.gif" onclick="expandCollapseTree(this)" onmouseover="swapImage(this)" onmouseout="swapImage(this)"/>Explanations
        <ul>
          <li><img src="images/plus_up.gif" onclick="expandCollapseTree(this)" onmouseover="swapImage(this)" onmouseout="swapImage(this)"/>Auto
            <ul>
              <li>Alternative Fuel </li>
              <li>Buying and Selling</li>
              <li>Car Models</li>
              <li>Car Options &amp; Accessories</li>
              <li>Car Safety</li>
              <li>Cutting Edge</li>
              <li>Under the Hood </li>
            </ul>
          </li>
          <li><img src="images/plus_up.gif" onclick="expandCollapseTree(this)" onmouseover="swapImage(this)" onmouseout="swapImage(this)"/>Communication
            <ul>
              <li>Conferencing</li>
              <li>Desktop Fax</li>
              <li>Notifications </li>
            </ul>
          </li>
          <li>Computer</li>
          <li>Electronics</li>
          <li><img src="images/plus_up.gif" onclick="expandCollapseTree(this)" onmouseover="swapImage(this)" onmouseout="swapImage(this)"/>Entertainment
            <ul>
              <li>Arts</li>
              <li>Movies</li>
              <li>Music</li>
              <li><img src="images/plus_up.gif" onclick="expandCollapseTree(this)" onmouseover="swapImage(this)" onmouseout="swapImage(this)"/>Sports
                <ul>
                  <li>AFL</li>
                  <li>Rugby</li>
                  <li>Soccer</li>
                  <li>Tennis</li>
                </ul>
              </li>
              <li>Television</li>
              <li>Toys</li>
              <li>Games</li>
            </ul>
          </li>
        </ul>
      </li>
      <li><img src="images/plus_up.gif" onclick="expandCollapseTree(this)" onmouseover="swapImage(this)" onmouseout="swapImage(this)" />Expert Reviews
        <ul>
          <li><img src="images/plus_up.gif" onclick="expandCollapseTree(this)" onmouseover="swapImage(this)" onmouseout="swapImage(this)"/>Consumer Guide Auto
            <ul>
              <li>New Cars </li>
              <li>Used Cars </li>
            </ul>
          </li>
          <li>Consumer Guide Products</li>
          <li><img src="images/plus_up.gif" onclick="expandCollapseTree(this)" onmouseover="swapImage(this)" onmouseout="swapImage(this)"/>Mobil Travel Guide
            <ul>
              <li>Hotels</li>
              <li>Resaurants</li>
              <li>Spas</li>
            </ul>
          </li>
        </ul>
      </li>
      <li><img src="images/plus_up.gif" onclick="expandCollapseTree(this)" onmouseover="swapImage(this)" onmouseout="swapImage(this)" />Opinions
        <ul>
          <li>Member Home</li>
          <li>Log In/Register</li>
        </ul>
      </li>
    </ul>
  </div>

Thanks

[Nile]

Do you want it to have the hand icon? Becuase right now if I click on one, its right. It hides, but there's no hand...
If you want the hand, add this style:

cursor:hand

Otherwise, I don't know what you mean.

[justmike108]

It works when you click on the plus and minus signs, i wan't it to work when you click on the link title aswell.

[rangana]

Just add an onclick event on the text itself (add highlighted):

<img src="images/plus_up.gif" onclick="expandCollapseTree(this)" onmouseover="swapImage(this)" onmouseout="swapImage(this)"/><span onclick="expandCollapseTree(this)">Explanations</span>

...do the same thing on the other texts.

Hope that helps.