Accordion

Code

<div id="accordion">
  <h3>Section 1</h3>
  <div><p>Content for section 1.</p></div>
  <h3>Section 2</h3>
  <div><p>Content for section 2.</p></div>
  <h3>Section 3</h3>
  <div><p>Content for section 3.</p></div>
</div>

<script>
$("#accordion").accordion({
  active: 0,
  collapsible: true,
  heightStyle: "content",
  animate: 300,
  icons: {
    header: "ui-icon-circle-arrow-e",
    activeHeader: "ui-icon-circle-arrow-s"
  },
  activate: function(event, ui) {
    console.log("Activated:", ui.newHeader.text());
  }
});

// Programmatic control
$("#accordion").accordion("option", "active", 2);
</script>

Explanation

Builds a collapsible panel group from h3/div pairs where the header click toggles its sibling content. Set collapsible:true to allow all panels to be collapsed, and heightStyle:'content' to size each panel to its content. The active option can be set programmatically by index, and activate fires after every change.

More jQuery UI Snippets