Monthly Archives: January 2012

Multilevel accordion in < 10 lines of jQuery

The markup:
<ul id='sections'>
  <li class='section'>
    <h3 class='section_header'>Section Title</h3>
    <ul class='subsection'>
      <li>
        <h3 class='subsection_header'>Subsection Title</h3>
        <div class='expand'>
           Content
        </div>
      </li>
      <li>
        <h3 class='subsection_header'>Subsection Title</h3>
        <div class='expand'>
           Content
        </div>
      </li>
    </ul>
  </li>
  <li class='section'>
    <h3 class='section_header'>Section Title</h3>
    <ul class='subsection'>
      <li>
        <h3 class='subsection_header'>Subsection Title</h3>
        <div class='expand'>
           Content
        </div>
      </li>
      <li>
        <h3 class='subsection_header'>Subsection Title</h3>
        <div class='expand'>
           Content
        </div>
      </li>
    </ul>
  </li>
</ul>
The script:
 $('ul.subsection, .expand').hide();
 $('li h3').live('click', function(e) {
  var time = 700;
  li = $(e.target).parent();
  li.parent().children('li').not(li).children('ul, div').slideUp(time);
  li.children('ul, div').slideDown(time);
 });