jQuery UI Accordion

The jQuery UI Accordion widget shows a set of headers with associated content panels. Activating a header expands its panel and normally collapses the previously active panel.

It works well for FAQs, grouped settings, documentation sections and other interfaces where users should reveal one content area at a time.

Basic Accordion Top ↑

$( function () {
    $( "#accordion" ).accordion();
});

<div id="accordion">
  <h3>Header 1</h3>
  <div>Text about Header 1</div>

  <h3>Header 2</h3>
  <div>Text about Header 2</div>

  <h3>Header 3</h3>
  <div>Text about Header 3</div>

  <h3>Header 4</h3>
  <div>Text about Header 4</div>
</div>

Demo of the basic Accordion with full code and CDN →

Keyboard Support Top ↑

• Up / Left: move focus to the previous header.
• Down / Right: move focus to the next header.
• Home: move focus to the first header.
• End: move focus to the last header.
• Space / Enter: activate the focused header.

Accordion Options Top ↑

active

Choose which panel is active when the Accordion starts. Indexes begin at 0.

$( "#accordion" ).accordion({
    active: 3
});

Demo: set the active panel →

Read the current active index:

const activeIndex =
    $( "#accordion" ).accordion( "option", "active" );

Set the active panel later:

$( "#accordion" ).accordion( "option", "active", selectedIndex );

Demo: change the active panel from radio buttons →

To allow every panel to be closed, combine active: false with collapsible: true.

$( "#accordion" ).accordion({
    active: false,
    collapsible: true
});

Demo: start with all panels collapsed →

animate

Control panel-transition animation. A number represents duration in milliseconds; false disables the animation. String/object forms can specify easing behavior.

$( "#accordion" ).accordion({
    animate: 50
});

Demo: Accordion animate option →

Read the current animation setting:

const animation =
    $( "#accordion" ).accordion( "option", "animate" );

Change the animation setting:

$( "#accordion" ).accordion( "option", "animate", selectedValue );

Demo: change animation speed from user selection →

classes

The Widget Factory classes option lets you add your own classes to jQuery UI structural classes.

$( "#accordion" ).accordion({
    classes: {
        "ui-accordion-header": "my-accordion-header"
    }
});

collapsible

Set collapsible: true if the currently open panel may also be collapsed.

$( "#accordion" ).accordion({
    active: false,
    collapsible: true
});

disabled

Disable the complete Accordion by setting the option to true.

$( "#accordion" ).accordion({
    disabled: false
});

Demo: disabled option →

Set the option after initialization:

$( "#accordion" ).accordion( "option", "disabled", true );

Read the option:

const isDisabled =
    $( "#accordion" ).accordion( "option", "disabled" );

Demo: get and set the disabled option →

event

The default activation event is click. You can configure another event, such as mouseover, when that interaction is appropriate for your interface.

$( "#accordion" ).accordion({
    event: "mouseover"
});

Demo: change the Accordion event →

Demo: get or set the event option →

header

If your markup uses a custom header selector, provide it through the header option. Each header must be paired with its following content panel.

$( "#accordion" ).accordion({
    header: ".header"
});

Demo: custom Accordion headers →

heightStyle

Use auto, fill or content to control panel heights.

$( "#accordion" ).accordion({
    heightStyle: "content"
});

Demo: heightStyle →

icons

Customize the header and active-header icons.

$( "#accordion" ).accordion({
    icons: {
        header: "ui-icon-plus",
        activeHeader: "ui-icon-minus"
    }
});

Demo: change Accordion icons →

Read the current icon object:

const icons =
    $( "#accordion" ).accordion( "option", "icons" );

Replace the icon object:

$( "#accordion" ).accordion(
    "option",
    "icons",
    {
        header: "ui-icon-plus",
        activeHeader: "ui-icon-minus"
    }
);

Demo: get and set the icons option →

Accordion Methods Top ↑

destroy()

Remove Accordion behavior and return the element to its pre-widget state.

$( "#destroy" ).on( "click", function () {
    $( "#accordion" ).accordion( "destroy" );
});

Demo: destroy the Accordion →

disable()

$( "#disable" ).on( "click", function () {
    $( "#accordion" ).accordion( "disable" );
});

Demo: disable and enable →

enable()

$( "#enable" ).on( "click", function () {
    $( "#accordion" ).accordion( "enable" );
});

Demo: disable and enable →

instance()

Return the Accordion widget instance when it exists.

const accordionInstance =
    $( "#accordion" ).accordion( "instance" );

Demo: get the Accordion instance →

option()

Read one option:

const active =
    $( "#accordion" ).accordion( "option", "active" );

Demo: read an option value →

Read a property from an object-valued option:

const icons =
    $( "#accordion" ).accordion( "option", "icons" );

$( "#d1" ).text( icons.header );

Read all options:

const options =
    $( "#accordion" ).accordion( "option" );

$.each( options, function ( key, value ) {
    $( "#d1" ).append(
        $( "<div>" ).text( key + ": " + String( value ) )
    );
});

Demo: display all Accordion options →

refresh()

Refresh the widget after adding/removing headers or panels in the DOM.

$( "#accordion" ).accordion( "refresh" );

widget()

Return the jQuery object representing the Accordion widget.

const widget =
    $( "#accordion" ).accordion( "widget" );

Accordion Events Top ↑

activate

activate fires after a panel transition completes. The ui object provides the old and new headers/panels.

$( "#accordion" ).accordion({
    animate: 1000,

    activate: function ( event, ui ) {
        $( "#d1" ).text(
            "New header: " + ui.newHeader.text() +
            " | New panel: " + ui.newPanel.text() +
            " | Old header: " + ui.oldHeader.text()
        );
    }
});

Demo: activate event →

beforeActivate

beforeActivate fires before the transition starts.

$( "#accordion" ).accordion({
    animate: 1000,

    beforeActivate: function ( event, ui ) {
        $( "#d1" ).text(
            "Opening: " + ui.newHeader.text() +
            " | Closing: " + ui.oldHeader.text()
        );
    }
});

Demo: beforeActivate event →

create

create fires when the Accordion is initialized.

$( "#accordion" ).accordion({
    create: function ( event, ui ) {
        $( "#d1" ).text(
            "Initial header: " + ui.header.text() +
            " | Initial panel: " + ui.panel.text()
        );
    }
});

Demo: create event →

← jQuery UI tutorials

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: