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>
LVL 3
yourbudweiserAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hernst42Commented:
Hi yourbudweiser,
instead of
> if (node.nextSibling.style.display == 'none')
try
if (node.nextSibling.style.display == 'none' || node.nextSibling.style.display == '')

Cheers!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dakydCommented:
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>
0
yourbudweiserAuthor Commented:
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!
0
hernst42Commented:
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
0
yourbudweiserAuthor Commented:
Hernst42 is right. For some reason, I didn't properly test his solution.

Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.