closing a tree menu [Archive]

Click to See Complete Forum and Search --> : closing a tree menu

mipapage

06-04-2003, 07:51 AM

Hello!

Okay, I have a script that allows me to toggle menu sub items open and closed:
function selectNode(id) {node = document.getElementById("sub" + id);if (node) {if (node.open){node.style.display = "none";document.images["node" + id].src = "images/off.gif";node.open = false;}else {node.style.display = "block";document.images["node" + id].src = "images/on.gif";node.open = true;}}}
here's the html:
<li id="a">
<a href="somelink" accesskey="o" tabindex="1000" onclick="selectNode(1);return false;" onkeypress="selectNode(1);return false;"><img id="node1" height="9"
alt="" src="images/off.gif" width="9" class="nodeimg" /> General</a>

<ul id="sub1" class="displaynone">
<li id="a1"><a href="somelink" tabindex="52">Ubicacion</a></li>
<li id="a2"><a href="somelink" tabindex="54" class="nb">Competencia</a></li>
<li id="a3"><a href="somelink" tabindex="56" class="nb">Objetivos</a></li>
</ul>
</li>

What I need to do for this application is have it so that when you click open a new submenu, any other open ones are closed. I've tried a few different ways of globally closing all submenu's before calling the selectnode function, but can't seem to get it right. Any advice out there?

TIA!

jrthor2

06-04-2003, 08:10 AM

I belive this link will show you a menu that does that

http://www.js-examples.com/example/?ex=592&mode=2

diamonds

06-04-2003, 08:12 AM

is there any way of closing the nodes?
and, you might want to implant somthing that can return the nodes that are open. Using that, you could close all nodes on that list! ;)

Can I get the FULL html/script?

mipapage

06-04-2003, 10:09 AM

Hey you two,

Thanks for the quick replies. I checked out that link, and that's exactly what I am after. However, if I can make my code work I'd rather go that route, as I understand it, and have implemented it already in other websites.

For simplicities sake, I threw together a little page, just cut, paste, and save as .html!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function selectNode(id) {node = document.getElementById("sub" + id);if (node) {if (node.open){node.style.display = "none";document.images["node" + id].src = "images/off.gif";node.open = false;}else {node.style.display = "block";document.images["node" + id].src = "images/on.gif";node.open = true;}}}
</script>
</head>

<body>
<ul><li id="a">
<a href="somelink" accesskey="o" tabindex="1000" onclick="selectNode(1);return false;" onkeypress="selectNode(1);return false;"><img id="node1" height="9"
alt="" src="images/off.gif" width="9" class="nodeimg" /> General</a>
<ul id="sub1" style="display:none">
<li id="a1"><a href="somelink" tabindex="52">Ubicacion</a></li>
<li id="a2"><a href="somelink" tabindex="54" class="nb">Competencia</a></li>
<li id="a3"><a href="somelink" tabindex="56" class="nb">Objetivos</a></li>
</ul>
</li>
<li id="b">
<a href="somelink" accesskey="o" tabindex="1000" onclick="selectNode(2);return false;" onkeypress="selectNode(2);return false;"><img id="node2" height="9"
alt="" src="images/off.gif" width="9" class="nodeimg" /> General</a>
<ul id="sub2" style="display:none">
<li id="a1"><a href="somelink" tabindex="52">Ubicacion</a></li>
<li id="a2"><a href="somelink" tabindex="54" class="nb">Competencia</a></li>
<li id="a3"><a href="somelink" tabindex="56" class="nb">Objetivos</a></li>
</ul>
</li>

</ul>
</body>
</html>

Thanks again...

mipapage

06-04-2003, 10:22 AM

Hmm, seems it's a bit easier to troubleshoot when I use that piece up there rather than the full page...you learn somethin' new....

having some success, but not quite there yet...

mipapage

06-04-2003, 11:50 AM

Okay, success, but could use some efficiency. This works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript Tree Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function selectNode(id)
{node = document.getElementById("sub" + id);
document.getElementById("sub1").style.display = "none";
document.getElementById("sub2").style.display = "none";
if (node) {
if (node.open){
node.style.display = "none";document.images["node" + id].src = "images/off.gif";node.open = false;}
else {node.style.display = "block";document.images["node" + id].src = "images/on.gif";node.open = false;
}}}
</script>
</head>
<body onload="selectNode(1);">
<ul><li id="a">
<a href="somelink" accesskey="o" tabindex="1000" onclick="selectNode(1);return false;"
onkeypress="selectNode(1);return false;"><img id="node1" height="9"
alt="" src="images/off.gif" width="9" class="nodeimg" /> General</a>
<ul id="sub1" style="display:none">
<li id="a1"><a href="somelink" tabindex="52">Ubicacion</a></li>
<li id="a2"><a href="somelink" tabindex="54" class="nb">Competencia</a></li>
<li id="a3"><a href="somelink" tabindex="56" class="nb">Objetivos</a></li>
</ul>
</li>
<li id="b">
<a href="somelink" accesskey="o" tabindex="1000" onclick="selectNode(2);return false;"
onkeypress="selectNode(2);return false;"><img id="node2" height="9"
alt="" src="images/off.gif" width="9" class="nodeimg" /> General</a>
<ul id="sub2" style="display:none">
<li id="a1"><a href="somelink" tabindex="52">Ubicacion</a></li>
<li id="a2"><a href="somelink" tabindex="54" class="nb">Competencia</a></li>
<li id="a3"><a href="somelink" tabindex="56" class="nb">Objetivos</a></li>
</ul> </li></ul> </body> </html>

Changes:

Removed the 'open=true' from the 'else'.
Added closing all of the 'sub' divs - "document.getElementById("sub1").style.display = "none";"

Existing problems:
1. As I am a JS hack, I know that I should be able to make an array to facilitate not having to list out the closing of all of the 'sub' divs. Any ideas?
2. I feel like I've done something circular in the script, never being able to fulfill the 'if (node.open)'. Is this okay?.. I mean, it works, right?

mipapage

06-04-2003, 12:24 PM

Okay, here's the latest JS
function selectNode(id)
{
document.images("node1").src = "images/off.gif";
document.images("node2").src = "images/off.gif";
document.images("node3").src = "images/off.gif";
document.images("node4").src = "images/off.gif";
document.getElementById("sub1").style.display = "none";
document.getElementById("sub2").style.display = "none";
document.getElementById("sub3").style.display = "none";
document.getElementById("sub4").style.display = "none";
node = document.getElementById("sub" + id);
if (node) {node.style.display = "block";document.images["node" + id].src = "images/on.gif";node.open = false;
}}

The code works perfectly, even swapping my little on/off images. If anyone can give me a hint as to how to reduce the repetative 'document.images' and 'document.getElementsById' entries, I'm laughing, and I'll post the entire code here when finished.

Update: Code not so perfect. Wow it must be funny for an outsider to read this. Diamonds, if you've got any good ideas WRT your original comment, go ahead and toss it my way!