asked on

Javascript Menu Tree Problem

I am using the following code to create a Menu Tree for my website. The problem is that when first loaded, it takes 2 clicks to expand. Any ideas? Any better coding ideas? Thanks alot!

<style>
body{
      font: 10pt Verdana,sans-serif;
      color: navy;
}

.text {
      font-family: Verdana;
      font-size: 10px;
}

.trigger{
      cursor: pointer;
      cursor: hand;
}
.branch{
      display: none;
      margin-left: 12px;
}
</style>

<script>

function Toggle(node)
{
      // Unfold the branch if it isn't visible
      if (node.nextSibling.style.display == 'none')
      {
            // Change the image (if there is an image)
            if (node.childNodes.length > 0)
            {
                  if (node.childNodes.item(0).nodeName == "IMG")
                  {
                        node.childNodes.item(0).src = "NOLINES_minus.gif";
                  }
            }

            node.nextSibling.style.display = 'block';
      }
      // Collapse the branch if it IS visible
      else
      {
            // Change the image (if there is an image)
            if (node.childNodes.length > 0)
            {
                  if (node.childNodes.item(0).nodeName == "IMG")
                  {
                        node.childNodes.item(0).src = "NOLINES_plus.gif";
                  }
            }

            node.nextSibling.style.display = 'none';
      }

}

</script>

<div class="trigger" onClick="Toggle(this)"><img src="nolines_plus.gif" border="0"> Click Me</div>

<span class="branch">
<img src="joinbottom.gif"><a href="123.com">Coverage Modified</a><br>
<img src="joinbottom.gif"><a href="123.com">Driver Added</a><br>
<img src="joinbottom.gif"><a href="123.com">Vehicle Added</a><br>
</span>

ASKER CERTIFIED SOLUTION

hernst42

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dakyd

If I'm not mistaken, that script won't work in the Mozilla-based browsers. White space creates a #text node in the DOM, so that nextSibling actually points to a text node, rather than to the <span>. What's worse, text nodes have no style, so it'll throw out javascript errors. You *can* account for these differences, but it involves rewriting a bit of your script.

And while we're talking about re-writing ... will something like the following help? Your question reminded me of the suckerfish drop downs, so I rewrote what you had with the help of some CSS. You essentially use lists to create your menu system, and then style the lists to make them look the way you want. The javascript essentially just switches class names, letting the CSS do the rest. It should work the same cross-browser, and also make your life easier by eliminating the need to walk the DOM. Hope it helps.

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style>
body{
font: 10pt Verdana,sans-serif;
color: navy;
}

.text {
font-family: Verdana;
font-size: 10px;
}

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav li {
cursor: pointer;
cursor: hand;
display: block;
}

#nav li ul {
display: none;
margin-left: 12px;
}

#nav li.show ul {
display: block;
}
</style>

<script type="text/javascript">
window.onload = initMenu;

function initMenu()
{
var lis = document.getElementById("nav").getElementsByTagName("li");
for (var i = 0, n = lis.length; i < n; i ++)
{
lis[i].onclick = toggle;
}
}

function toggle()
{
var imgs = this.getElementsByTagName("img");
if (this.className.indexOf("show") > -1)
{
this.className = this.className.replace(/\s?show/, "");
if (imgs.length > 0)
imgs[0].src = "NOLINES_plus.gif";
}
else
{
this.className += " show";
if (imgs.length > 0)
imgs[0].src = "NOLINES_minus.gif";
}
}
</script>
</head>

<body>
<ul id="nav">
<li><img src="nolines_plus.gif" style="border: 0;" />Click Me
<ul>
<li><img src="joinbottom.gif"><a href="123.com">Coverage Modified</a></li>
<li><img src="joinbottom.gif"><a href="123.com">Driver Added</a></li>
<li><img src="joinbottom.gif"><a href="123.com">Vehicle Added</a></li>
</ul>
</li>
</ul>

</body>
</html>

yourbudweiser

ASKER

Hey guys thanks for responding. Dakyd, although your script works perfectly as above, it doesn't work in the context of my page. I have alot of content between the trigger and branch. I have modified my original script and it now works perfectly. I appreciate your help, thanks!

hernst42

I object in this case, as the solution provided by me solved the problem (at least with the example that was given).
As the questioner said he modified his script (which way? maybe by the way I mentioned?). He might post his solution so this question can be closed with

answerd himself refund the points

yourbudweiser

ASKER

Hernst42 is right. For some reason, I didn't properly test his solution.

Thanks!