jQuery UI Accordion

The jQuery UI accordion() widget turns a stack of header/content pairs into a space-saving, collapsible set of panels - only one section is shown at a time by default, which is perfect for FAQs, settings groups, or any long page you want to compress into clickable headings.

1) Basic Accordion


<!-- markup: alternating heading / content elements inside one wrapper -->
<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>
</div>

$('#accordion').accordion(); // that's it - jQuery UI does the rest
Try it Yourself »

2) The collapsible option


// by default one panel must always stay open; collapsible lets the user close them all
$('#accordion').accordion({
  collapsible: true
});
Try it Yourself »
Tip: collapsible: true is a great fit for FAQ pages where a visitor may not want any answer expanded at all.

3) The heightStyle option


// 'auto'   = every panel takes the height of the tallest panel (default)
// 'fill'   = accordion fills the height of its parent container
// 'content'= each panel sizes itself to its own content (natural height)
$('#accordion').accordion({
  heightStyle: 'content'
});
Try it Yourself »

4) The activate event


$('#accordion').accordion({
  activate: function(event, ui){
    // ui.newHeader / ui.newPanel = the panel that just opened
    // ui.oldHeader / ui.oldPanel = the panel that just closed
    console.log(ui.newHeader.text());
  }
});
Try it Yourself »

Live Demo

Click a question below to expand its answer - this is a real, working accordion() widget with collapsible: true, so you can also close every panel at once.

What is jQuery UI?

jQuery UI is an official companion library built on top of jQuery core that adds ready-made, themeable widgets like this accordion, tabs, dialogs, and datepickers.

Do I need to write my own CSS for this?

No - jQuery UI ships its own stylesheet with classes such as ui-accordion and ui-state-active that style the widget out of the box.

Can more than one panel be open at a time?

Not with the default settings, but you can build a "multi-open" accordion by toggling panels manually instead of relying purely on the built-in single-panel behavior.

Heads up: The accordion's markup must alternate header elements (like <h3>) with their matching content wrapper (like <div>) - skipping or reordering an element breaks the header/panel pairing.