Toggle menu problem

Discussion in 'JavaScript' started by zhouhana, Feb 5, 2012.

0
  1. #1
    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>
    Code (markup):
     
    zhouhana, Feb 5, 2012 IP