## Accordion Widget version added: 1.0

Description: Convert a pair of headers and content panels into an accordion.

## QuickNavExamples

The markup of your accordion container needs pairs of headers and content panels:

1
2
3
4
5
6

    <div id="accordion">  <h3>First header</h3>  <div>First content panel</div>  <h3>Second header</h3>  <div>Second content panel</div></div>

Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the `header` option for information on how to use custom markup structures.

The panels can be activated programmatically by setting the `active` option.

### Keyboard interaction

When focus is on a header, the following key commands are available:

- UP/LEFT - Move focus to the previous header. If on first header, moves focus to last header.
- DOWN/RIGHT - Move focus to the next header. If on last header, moves focus to first header.
- HOME - Move focus to the first header.
- END - Move focus to the last header.
- SPACE/ENTER - Activate panel associated with focused header.

When focus is in a panel:

- CTRL+UP: Move focus to associated header.

### Dependencies

- UI Core
- Widget Factory
- Effects Core (optional; for use with the `animate` option)

### Additional Notes:

- This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

## Options

### activeType: Boolean or Integer

Default: `0`
Which panel is currently open.
Multiple types supported:

- Boolean: Setting `active` to `false` will collapse all panels. This requires the `collapsible` option to be `true`.
- Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.

Code examples:

Initialize the accordion with the `active` option specified:

1

    $( ".selector" ).accordion({ active: 2 });

Get or set the `active` option, after initialization:

1
2
3
4
5

    // gettervar active = $( ".selector" ).accordion( "option", "active" ); // setter$( ".selector" ).accordion( "option", "active", 2 );

### animateType: Boolean or Number or String or Object

Default: `{}`
If and how to animate changing panels.
Multiple types supported:

- Boolean: A value of `false` will disable animations.
- Number: Duration in milliseconds with default easing.
- String: Name of easing to use with default duration.
- Object: Animation settings with `easing` and `duration` properties.
  - Can also contain a `down` property with any of the above options.
  - "Down" animations occur when the panel being activated has a lower index than the currently active panel.

Code examples:

Initialize the accordion with the `animate` option specified:

1

    $( ".selector" ).accordion({ animate: "bounceslide" });

Get or set the `animate` option, after initialization:

1
2
3
4
5

    // gettervar animate = $( ".selector" ).accordion( "option", "animate" ); // setter$( ".selector" ).accordion( "option", "animate", "bounceslide" );

### collapsibleType: Boolean

Default: `false`
Whether all the sections can be closed at once. Allows collapsing the active section.
Code examples:

Initialize the accordion with the `collapsible` option specified:

1

    $( ".selector" ).accordion({ collapsible: true });

Get or set the `collapsible` option, after initialization:

1
2
3
4
5

    // gettervar collapsible = $( ".selector" ).accordion( "option", "collapsible" ); // setter$( ".selector" ).accordion( "option", "collapsible", true );

### disabledType: Boolean

Default: `false`
Disables the accordion if set to `true`.
Code examples:

Initialize the accordion with the `disabled` option specified:

1

    $( ".selector" ).accordion({ disabled: true });

Get or set the `disabled` option, after initialization:

1
2
3
4
5

    // gettervar disabled = $( ".selector" ).accordion( "option", "disabled" ); // setter$( ".selector" ).accordion( "option", "disabled", true );

### eventType: String

Default: `"click"`
The event that accordion headers will react to in order to activate the associated panel. Multiple events can be specificed, separated by a space.
Code examples:

Initialize the accordion with the `event` option specified:

1

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

Get or set the `event` option, after initialization:

1
2
3
4
5

    // gettervar event = $( ".selector" ).accordion( "option", "event" ); // setter$( ".selector" ).accordion( "option", "event", "mouseover" );

### headerType: Selector

Default: `"> li > :first-child,> :not(li):even"`

Selector for the header element, applied via `.find()` on the main accordion element. Content panels must be the sibling immedately after their associated headers.

Code examples:

Initialize the accordion with the `header` option specified:

1

    $( ".selector" ).accordion({ header: "h3" });

Get or set the `header` option, after initialization:

1
2
3
4
5

    // gettervar header = $( ".selector" ).accordion( "option", "header" ); // setter$( ".selector" ).accordion( "option", "header", "h3" );

### heightStyleType: String

Default: `"auto"`

Controls the height of the accordion and each panel. Possible values:

- `"auto"`: All panels will be set to the height of the tallest panel.
- `"fill"`: Expand to the available height based on the accordion's parent height.
- `"content"`: Each panel will be only as tall as its content.

Code examples:

Initialize the accordion with the `heightStyle` option specified:

1

    $( ".selector" ).accordion({ heightStyle: "fill" });

Get or set the `heightStyle` option, after initialization:

1
2
3
4
5

    // gettervar heightStyle = $( ".selector" ).accordion( "option", "heightStyle" ); // setter$( ".selector" ).accordion( "option", "heightStyle", "fill" );

### iconsType: Object

Default: `{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }`

Icons to use for headers, matching an icon defined by the jQuery UI CSS Framework. Set to `false` to have no icons displayed.

- header (string, default: "ui-icon-triangle-1-e")
- activeHeader (string, default: "ui-icon-triangle-1-s")

Code examples:

Initialize the accordion with the `icons` option specified:

1

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

Get or set the `icons` option, after initialization:

1
2
3
4
5

    // gettervar icons = $( ".selector" ).accordion( "option", "icons" ); // setter$( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "headerSelected": "ui-icon-minus" } );

## Methods

### destroy()Returns: jQuery (plugin only)

Removes the accordion functionality completely. This will return the element back to its pre-init state.

- This method does not accept any arguments.

Code examples:

Invoke the destroy method:

1

    $( ".selector" ).accordion( "destroy" );

### disable()Returns: jQuery (plugin only)

Disables the accordion.

- This method does not accept any arguments.

Code examples:

Invoke the disable method:

1

    $( ".selector" ).accordion( "disable" );

### enable()Returns: jQuery (plugin only)

Enables the accordion.

- This method does not accept any arguments.

Code examples:

Invoke the enable method:

1

    $( ".selector" ).accordion( "enable" );

### option( optionName )Returns: Object

Gets the value currently associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to get.

Code examples:

Invoke the method:

1

    var isDisabled = $( ".selector" ).accordion( "option", "disabled" );

### option()Returns: PlainObject

Gets an object containing key/value pairs representing the current accordion options hash.

- This signature does not accept any arguments.

Code examples:

Invoke the method:

1

    var options = $( ".selector" ).accordion( "option" );

### option( optionName, value )Returns: jQuery (plugin only)

Sets the value of the accordion option associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to set.
- value
  Type: Object
  A value to set for the option.

Code examples:

Invoke the method:

1

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

### option( options )Returns: jQuery (plugin only)

Sets one or more options for the accordion.

- options
  Type: Object
  A map of option-value pairs to set.

Code examples:

Invoke the method:

1

    $( ".selector" ).accordion( "option", { disabled: true } );

### refresh()Returns: jQuery (plugin only)

Recompute the height of the accordion panels. Results depend on the content and the `heightStyle` option.

- This method does not accept any arguments.

Code examples:

Invoke the refresh method:

1

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

### widget()Returns: jQuery

Returns a `jQuery` object containing the accordion.

- This method does not accept any arguments.

Code examples:

Invoke the widget method:

1

    var widget = $( ".selector" ).accordion( "widget" );

## Events

### activate( event, ui )Type: `accordionactivate`

Triggered after a panel has been activated (after animation completes). If the accordion was previously collapsed, `ui.oldHeader` and `ui.oldPanel` will be empty jQuery objects. If the accordion is collapsing, `ui.newHeader` and `ui.newPanel` will be empty jQuery objects.

- event
  Type: Event
- ui
  Type: Object
  - newHeader
    Type: jQuery
    The header that was just activated.
  - oldHeader
    Type: jQuery
    The header that was just deactivated.
  - newPanel
    Type: jQuery
    The panel that was just activated.
  - oldPanel
    Type: jQuery
    The panel that was just deactivated.

Code examples:

Initialize the accordion with the activate callback specified:

1
2
3

    $( ".selector" ).accordion({  activate: function( event, ui ) {}});

Bind an event listener to the accordionactivate event:

1

    $( ".selector" ).on( "accordionactivate", function( event, ui ) {} );

### beforeActivate( event, ui )Type: `accordionbeforeactivate`

Triggered directly before a panel is activated. Can be canceled to prevent the panel from activating. If the accordion is currently collapsed, `ui.oldHeader` and `ui.oldPanel` will be empty jQuery objects. If the accordion is collapsing, `ui.newHeader` and `ui.newPanel` will be empty jQuery objects.

- event
  Type: Event
- ui
  Type: Object
  - newHeader
    Type: jQuery
    The header that is about to be activated.
  - oldHeader
    Type: jQuery
    The header that is about to be deactivated.
  - newPanel
    Type: jQuery
    The panel that is about to be activated.
  - oldPanel
    Type: jQuery
    The panel that is about to be deactivated.

Code examples:

Initialize the accordion with the beforeActivate callback specified:

1
2
3

    $( ".selector" ).accordion({  beforeActivate: function( event, ui ) {}});

Bind an event listener to the accordionbeforeactivate event:

1

    $( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} );

### create( event, ui )Type: `accordioncreate`

Triggered when the accordion is created. If the accordion is collapsed, `ui.header` and `ui.panel` will be empty jQuery objects.

- event
  Type: Event
- ui
  Type: Object
  - header
    Type: jQuery
    The active header.
  - panel
    Type: jQuery
    The active panel.

Code examples:

Initialize the accordion with the create callback specified:

1
2
3

    $( ".selector" ).accordion({  create: function( event, ui ) {}});

Bind an event listener to the accordioncreate event:

1

    $( ".selector" ).on( "accordioncreate", function( event, ui ) {} );

## Example:

#### A simple jQuery UI Accordion

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>accordion demo</title>  <link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.8.3.js"></script>  <script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script></head><body> <div id="accordion">  <h3>Section 1</h3>  <div>    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.    Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,    condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.    Nam mi. Proin viverra leo ut odio.</p>  </div>  <h3>Section 2</h3>  <div>    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,    faucibus interdum tellus libero ac justo.</p>  </div>  <h3>Section 3</h3>  <div>    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.    Quisque lobortis.Phasellus pellentesque purus in massa.</p>    <ul>      <li>List item one</li>      <li>List item two</li>      <li>List item three</li>    </ul>  </div></div> <script>$( "#accordion" ).accordion();</script> </body></html>

#### Demo: