Click to format the list and add behaviors

• Option One
  • Sub Option One
    • Product One
    • Product Two
    • Product Three
    • Product Four
  • Sub Option Two
    • Product Five
    • Product Six
    • Product Seven
    • Product Eight
  • Sub Option Three
    • Product Nine
    • Product Ten
    • Product Eleven
    • Product Twelve
  • Sub Option Four
    • Product Thirteen
    • Product Fourteen
    • Product Fifteen
    • Product Sixteen
• Option Two
  • Sub Option Five
    • Product Seventeen
    • Product Eighteen
    • Product Nineteen
    • Product Twenty
  • Sub Option Six
    • Product Twenty-one
    • Product Twenty-two
    • Product Twenty-three
    • Product Twenty-four
  • Sub Option Seven
    • Product Twenty-five
    • Product Twenty-six
    • Product Twenty-seven
    • Product Twenty-eight
  • Sub Option Eight
    • Product Twenty-nine
    • Product Thirty
    • Product Thirty-one
    • Product Thirty-two
• Option Three
  • Sub Option Nine
    • Product Thirty-three
    • Product Thirty-four
    • Product Thirty-five
    • Product Thirty-six
  • Sub Option Ten
    • Product Thirty-seven
    • Product Thirty-eight
    • Product Thirty-nine
    • Product Forty
  • Sub Option Eleven
    • Product Forty-one
    • Product Forty-two
    • Product Forty-three
    • Product Forty-four
  • Sub Option Twelve
    • Product Forty-five
    • Product Forty-six
    • Product Forty-seven
    • Product Forty-eight
• Option Four
  • Sub Option Thirteen
    • Product Forty-nine
    • Product Fifty
    • Product Fifty-one
    • Product Fifty-two
  • Sub Option Fourteen
    • Product Fifty-three
    • Product Fifty-four
    • Product Fifty-five
    • Product Fifty-six
  • Sub Option Fifteen
    • Product Fifty-seven
    • Product Fifty-eight
    • Product Fifty-nine
    • Product Sixty
  • Sub Option Sixteen
    • Product Sixty-one
    • Product Sixty-two
    • Product Sixty-three
    • Product Sixty-four

document.observe('dom:loaded',function(){ $('main').addClassName('finder'); $$('#main li > ul').invoke('hide'); $$('#main li').invoke('addClassName','clickable'); $('main').observe('click',function(evt){ var elm = Event.element(evt); if(elm.hasClassName('clickable')){ var next = elm.down('ul'); Event.stop(evt); elm.addClassName('selected'); if(next){ next.show(); $('message').update(''); }else{ $('message').update('<h1>' + elm.innerHTML + '</h1>'); } elm.siblings().each(function(elm){ elm.removeClassName('selected'); elm.select('ul').invoke('hide'); }); elm.descendants().invoke('removeClassName','selected'); } }); });