Question

I am parsing a markdown file with nested uls to create an accordion style documentation system where you can click on each element that is followed by a ul and expand to see it’s contents.

The structure is roughly:

h4 (click to expand)
  ul
    li (click to expand)
      ul
        li (click to expand)
          ul

Here’s my code:

$('li').each(function(){
  if($(this).children().is('ul')) {
  $(this).addClass('link').bind('click', function(e){
    e.stopPropogation();
    $(this).children('ul').slideToggle();
  }); }
});

Without stopPropigation() in there when I click on the second li trigger (level 2?) it does expand it’s contents but also collapses the parent which, obviously, makes it a moot action. If I use stopProp it kills the function all together.

Thoughts?

Answer 1

How about this: http://jsfiddle.net/aCaEG/