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.