homepage Welcome to WebmasterWorld Guest from 54.167.185.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Toggle menu problem
zhouhana




msg:4414426
 7:18 am on Feb 5, 2012 (gmt 0)

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>

 

rainborick




msg:4414495
 5:46 pm on Feb 5, 2012 (gmt 0)

I may not see what you're after, but it looks to me like you should use class="headline" on the enclosing <li> tag, not the <span> tag. Actually, you might need to use something like:

<li>
<div class="headline">Headline 2
<ul>
<li><a href="">Option 1</a></li>
<li><a href="">Option 2</a></li>
<li><a href="">Option 3</a></li>
</ul>
</div>
</li>

or something similar.

zhouhana




msg:4416496
 4:23 am on Feb 11, 2012 (gmt 0)

Thanks, but wouldn't that make the headline go away to? I want to apply the onclick to the headline only and make only the options (not the headline) get a display: none.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved