This example illustrates how to use the jQuery Tools Accordion to transform a set of divs into a first class accordion component.

The jQuery Tools Tabs provides an effect that simultaneously grows the height of one element while shrinking the height of another. The Accordion behavior adds the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing and hovering.

The HTML structure is an outer div that holds all of the panels. Then, each panel consists of an H2 element for the header and a DIV for the content.

<div id="accordion">

  <h2>Overview</h2>
  <div id="pane">
    ... content text ...
  </div>

  <h2>Chapter 1</h2>
  <div id="pane">
    ... content text ...
  </div>

</div>

To attach the accordion behavior to the accordion container div, select the target accordion div, and specify the tabs and header. Lastly we provide an effect to show/hide panels. That's it!

  $("#accordion").tabs("#accordion div.pane", {
    tabs: 'h2',
    effect: 'slide'
  }); 

The Accordion is styled through a normal CSS stylesheet. Visual aspects such as height, width, color can easily be specified via CSS.

/* root element for accordion. */
#accordion {
  background-color:#F0F0F0;
  width: 500px;
}
/* accordion header */
#accordion h2 {
  border: #F0F0F0 1px solid;
  cursor:pointer;
}
/* accordion pane */
#accordion div.pane {
  border:1px solid #fff;
  display:none;
  height:250px;
}