Toggle menu problem

Hey guys,

I'm trying to create a toggle menu. When I click "Headline 1" or "Headline 2", the options below should appear/disappear, but right now they aren't. The debugger is giving me a singleSpanElement.nextSibling.style is undefined error at row 31 (in the for loop).

What am I doing wrong, and why? And am I using this correctly?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Test</title>
 <script type="text/javascript">

 window.onload = initAll;

 function initAll() {

  function toggle() {
  var nextSibling = findNextSibling(this);
  if (nextSibling.style.display == "block") {
   nextSibling.style.display = "none";
  } else {
   nextSibling.style.display = "block";
  }
  }

  function findNextSibling(spanElementWithHeadlineClass) {
  do {
   var nextSiblingOfSpanElementWithHeadlinesClass = spanElementWithHeadlineClass.nextSibling;
  } while (nextSiblingOfSpanElementWithHeadlinesClass && nextSiblingOfSpanElementWithHeadlinesClass.nodeType != 1);
  return nextSiblingOfSpanElementWithHeadlinesClass;
  }

  function forEveryElementWithHeadlineClass() {
  var allSpanElements = document.getElementsByTagName("span");
  for ( var i = 0 ; i < allSpanElements.length ; i++ ) {
   var singleSpanElement = allSpanElements[i];
   if (singleSpanElement.className === "headline") {
   singleSpanElement.nextSibling.style.display = "none";
   singleSpanElement.onclick = toggle;
   }
  }
  }
  forEveryElementWithHeadlineClass();
 }
 </script>
 </head>
 <body>
 <div id="navigation">
  <ul>
  <li><span class="headline">Headline 1</span>
   <ul>
   <li><a href="">Option 1</a></li>
   <li><a href="">Option 2</a></li>
   <li><a href="">Option 3</a></li>
   </ul>
  </li>
  <li><span class="headline">Headline 2</span>
   <ul>
   <li><a href="">Option 1</a></li>
   <li><a href="">Option 2</a></li>
   <li><a href="">Option 3</a></li>
   </ul>
  </li>
  </ul>
 </div>
 </body>
</html>

Toggle menu problem

zhouhana

rainborick

zhouhana

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week