1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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