trying to seperate behavior from structure

i'm having some trouble wrapping my head around event handling sans inline event handlers. can somebody help point me in the right direction towards achieving that with something like this as a starting point?


// script
function expandSubmenu(caller) {
// The calling <a>, it's text, and the <ul> we want to show are all sibling nodes on the same level.
// Hence, we need to invoke 'nextSibling' twice to target the <ul> we want to show. (diagram: <a> --> #text --> <ul>)
submenu = caller.nextSibling.nextSibling;
// Toggle display of the submenu
submenu.style.display = ((submenu.style.display == "")||(submenu.style.display == "none")) ? "block" : "none";
// Indicate a parent menu option has been selected by applying a class to it and remove the class when deselected.
if (caller.getAttribute("class")==null){caller.setAttribute("class","selected");}else{caller.removeAttribute("class");}
return false;
}


<!-- markup -->
<div id="mainMenu">
<h2>Main Menu</h2>
<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">View/Edit</a></li>
</ul>
</li>
<CFif session.permissions is 2>
<li><a href="admin.cfm?action=users" onclick="return expandSubmenu(this)">Users</a>
<ul>
<li><a href="admin.cfm?action=users&amp;option=update">Add</a></li>
<li><a href="admin.cfm?action=users">View/Edit</a></li>
</ul>
</li>
</CFif>
<li class="seperator"><a href="admin.cfm">Admin Main</a></li>
<li><a href="admin.cfm?action=log_out">Log Out</a></li>
</ul>
</div>


Thanks in advance. And again, I don't necessarily want the solution as much as help understanding the concept and process. Links to your favorite tutorials on the subject would be great

www.vladdy.net/Demos/Tree.html

On this page (http://cross-browser.com/x/examples/xwindow.php) scroll down to the xWinClass discussion. It's an example of implementing "unobtrusive dhtml". Perhaps it will be helpful. Feel free to ask any questions. :)

Thank you Vladdy and Mike... look like great resources. I will check them out more this weekend, hopefully.

I am wondering about something else now though. In my script, I ended up with:

var submenu = caller.nextSibling.nextSibling;

To target a <ul> that is the sibling of an <a> within' a <li>. Now, I am interested in modifying this approach to work with a definition list. So then, our trigger is going to be the <a> within the <dt>, and our submenu or toggled element the associated <dd>. The relationship then is something like:

var details = caller.parentNode.nextSibling;

Though, parentNode does not seem to exist, and using `getParentNode()` in its place leaves FireFox telling me that's not a function. What am I looking for that is similar to `.nextSibling` but targets the parent node instead?

Perhaps there's a text node in between.

It would be easier if we could see it.