Basic Accordion UI Element

Markup.html

<dl class="accordion">
  <dt>Accordion Heading 1</dt>
  <dd>
    <p>Some content</p></dd>
  <dt>Accordion Heading 2</dt>
  <dd>
    <p>Some more content</p></dd>
  <dt>Accordion Heading 3</dt>
  <dd>
    <p>Some final content</p></dd>
</dl>​

Script.jquery.js

if (typeof jQuery != "undefined") {
  (function($) {
    $('.accordion dt').each(function() {
      $(this).on('click', function(){
        $(this).toggleClass('on').siblings('.on').removeClass('on').end()
          .next('dd').slideToggle().siblings('dd').slideUp();
      }).next('dd').hide();
    });
  })(jQuery);
}​

Styling.css

.accordion { border:1px solid #ccc; }

.accordion dt { padding:.5em; background-color:#dadada; cursor:pointer; }

.accordion dt:hover { color:#666; }

.accordion .on { background-color:#eaeaea; cursor:default; }

.accordion dt,
.accordion .on:hover { color:#111; }

.accordion dd { padding-left:.5em; padding-right:.5em; }

/* NOTE:
  Do not apply top/bottom padding or margin to the accordion content,
  as its affects to the box model will cause the animation to be choppy.
  Instead, apply vertical spacing to the content elements.
  */

.accordion dd p { padding-top:.5em; padding-bottom:.5em; }

body{ padding:2em; } /* used only to pretty up the display panel */​