getNextSibling()

I am trying to write a function to expand submenu options from a main menu. All options in a list. I want to use getNextSibling to avoid unecessary class or id attributes in my markup.


<!-- example markup -->
<ul id="nav">
<li><a href="#">option 1</a></li>
<li>
<a href="#" onclick="expandSubmenu(this)">option 2</a>
<ul>
... submeny options ...
</ul>
</li>
</ul>

// script
function expandSubmenu(parent) {
subnav = parent.getNextSibling().display;
if ((subnav == "")||(subnav == "none")) {
subnav = "block";
} else {
subnav = "none";
}
return false;
}


The submenus are hidden by default with JS. Accessibility zealots fear not, the parent links in my actual code would be followed to a secondary representation of the information if JS is disabled. This is what I've started with, but at this point Firefox JS console is telling me "parent.getNextSibling is not a function". Where am I going wrong?

.nextSibling is a property. .getNextSibling() is a getter function for a DOM binding in languages which don't support getters. So use .nextSibling, and watch out for whitespace nodes.

Ah, mmkay. I was skeptical about getNextSibling the function as searches for it turned up some obscure texts, much of it dealing with XML and such. Thanks for clearing things up. :)

Once I target the correct node, how do I access the style properties for the element at that node?

.style

I thought so, but I am not getting the desired results. I thought perhaps once you targeteted a node you had to do something like [pseudo-code]getElementByNode[/pseudo-code]. Here is what I'm trying:


<!-- markup -->
<!-- inner <ul>s are hidden with stylesheet by default -->
<ul>
<li><a href="admin.cfm?action=categories" onclick="return expandSubmenu(this)">Categories</a>
<ul>
<li><a href="admin.cfm?action=categories&amp;option=update">Add</a></li>
<li><a href="admin.cfm?action=categories">Browse</a></li>
</ul>
</li>
</ul>

// JS
function expandSubmenu(parent) {
sibling = parent.nextSibling.nextSibling; // skip over text node to get to adjacent <ul>
subnavDisplay = sibling.style.display;
//alert("Node Name: " + sibling.nodeName + "\nNode Type: " + sibling.nodeType + "\nNode Value: " + sibling.nodeValue + "\nDisplay: " + subnavDisplay);
if ((subnavDisplay == "")||(subnavDisplay == "none")) {
subnavDisplay = "block";
} else {
subnavDisplay = "none";
}
return false;
}


My debug alert tells me I'm targeting the correct node. No JS errors. :\

subnavDisplay is a string, not a pointer reflecting the actual value of the display property. Just assign back to sibling.style.display instead of subnavDisplay.

ah yes, indeed, thanks!