basic tree structure nav using prototype

Question

hopefully someone can help. I am trying to fiddle with Prototype JS and have a question about a basic collapsible nav structure I am trying to build.

The following works well except for one thing. I would like for the JS to identify if the child or 'next' DOM element is empty to not fire.

The code is:

Event.observe(document, 'dom:loaded', function() {  
 $$('#leftnav li a').each(function(element) {  
  Event.observe(element, 'click', function(event){ 
  Event.stop(event);
  Event.element(event).next(0).toggle(); 
  Event.element(event).up(0).toggleClassName('active');
  }, 
  false);             
 });  
});

So if there not a nested 'UL', don't fire. When I try to break this out into an if else, it seems to fail no matter what.

Thoughts or suggestions?

Thanks!

Answer 1

Assuming that your HTML looks something like this:

  <div id="leftnav">
    <ul>
      <li>
        <a>Section A</a>
        <ul>
          <li>
            <a>Subsection A.1</a>
          </li>
        </ul>
      </li>
      <li>
        <a>Section B</a>
      </li>
    </ul>
  </div>

I think that the following javascript will accomplish expanding or compressing the nested list:

Event.observe(document, 'dom:loaded', function() 
{  
  $$('#leftnav li a').each(function(anchor) 
  {  
    anchor.observe('click', function(e)
    { 
      e.stop();
      var el = e.element();
      var next = el.next('ul');
      if (next)
      {
        next.toggle();
      }
      el.up('li').toggleClassName('active');
    });             
 });  
});