QuickNav

Options

active
animate
collapsible
disabled
event
header
heightStyle
icons

Methods

destroy
disable
enable
option
refresh
widget

Events

activate
beforeActivate
create

Accordion Widgetversion added: 1.0

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

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.

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.

collapsibleType: Boolean

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

disabledType: Boolean

Default: false
Disables the accordion if set to 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.

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.

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.

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")

Methods

destroy()

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

disable()

Disables the accordion.

enable()

Enables the accordion.

option( optionName ) Returns: Object

Gets the value currently associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to get.

option() Returns: PlainObject

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

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.

option( options )

Sets one or more options for the accordion.
  • options
    Type: Object
    A map of option-value pairs to set.

refresh()

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

widget() Returns: jQuery

Returns a jQuery object containing the accordion.

Events

activate( event, ui )

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.

beforeActivate( event, ui )

Triggered directly after 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.

create( event, ui )

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

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.

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.0/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/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: