## Accordion Widgetversion 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.

### 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:

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

Get or set the active option, after initialization:

`// getter` `var` `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:

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

Get or set the animate option, after initialization:

`// getter` `var` `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:

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

Get or set the collapsible option, after initialization:

`// getter` `var` `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:

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

Get or set the disabled option, after initialization:

`// getter` `var` `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:

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

Get or set the event option, after initialization:

`// getter` `var` `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:

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

Get or set the header option, after initialization:

`// getter` `var` `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:

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

Get or set the heightStyle option, after initialization:

`// getter` `var` `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:

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

Get or set the icons option, after initialization:

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

## Methods

### destroy()

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:

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

### disable()

Disables the accordion.

- This method does not accept any arguments.

Code examples:

Invoke the disable method:

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

### enable()

Enables the accordion.

- This method does not accept any arguments.

Code examples:

Invoke the enable method:

`$(` `".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:

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

### option()Returns: PlainObject

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

- This method does not accept any arguments.

Code examples:

Invoke the method:

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

### option( optionName, value )

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:

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

### option( options )

Sets one or more options for the accordion.

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

Code examples:

Invoke the method:

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

### refresh()

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:

`$(` `".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:

`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:

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

Bind an event listener to the accordionactivate event:

`$(` `".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:

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

Bind an event listener to the accordionbeforeactivate event:

`$(` `".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:

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

Bind an event listener to the accordioncreate event:

`$(` `".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``=``"http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"``>`
`` `<``script` `src``=``"http://code.jquery.com/jquery-1.8.3.js"``></``script``>`
`` `<``script` `src``=``"http://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: