jQuery UI API - Accordion Widget

Usage

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

Version Added: 1.0

The markup for the accordion container requires a pair of headers and content panels.

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

The accordion supports arbitrary markup, but each content panel must be the next sibling following its associated header. See the header option for information on how to use custom markup structures.

Panels can be activated programmatically by setting the active option.

Keyboard Interaction

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

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

When the focus is within a panel, the following keyboard commands are available:

CTRL+UP: Move focus to the associated header.

Theming

The Accordion Widget uses the jQuery UI CSS Framework to define its visual style and appearance. If you need to use styles specific to the accordion, you can use the following CSS class names:

ui-accordion: The outer container of the accordion.
ui-accordion-header: The header of the accordion. If the header includes icons, the header will additionally have the ui-accordion-icons class.
ui-accordion-content: The content panel of the accordion.

Dependencies

UI Core
Widget Factory
Effects Core (optional; when used with the animate option)

Additional Notes

This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget-specific CSS file as a starting point.

Quick Navigation

Options	Methods	Events
active animate collapsible disabled event header heightStyle icons	destroy disable enable option refresh widget	activate beforeActivate create

Option	Type	Description	Default Value
active	Boolean or Integer	Indicates which panel is currently open. <br> Supports multiple types: Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true. <br> Integer: Activates the panel at the given zero-based index. Negative values select panels starting from the last one. Code example: Initialize an accordion with a specified active option: $( ".selector" ).accordion({ active: 2 }); After initialization, get or set the active option: // getter<br>var active = $( ".selector" ).accordion( "option", "active" );<br> <br>// setter<br>$( ".selector" ).accordion( "option", "active", 2 );	0
animate	Boolean or Number or String or Object	Whether to animate the panel change and how to animate it. <br> Supports multiple types: Boolean: A false value will disable animation. <br> Number: The default duration in milliseconds for easing. <br> String: The name of the easing to use for the default duration. <br> Object: Animation settings with easing and duration properties. <br> Any of the above options can include a down property. <br> The "Down" animation occurs when the activated panel has a lower index than the currently active panel. Code example: Initialize an accordion with a specified animate option: $( ".selector" ).accordion({ animate: "bounceslide" }); After initialization, get or set the animate option: // getter<br>var animate = $( ".selector" ).accordion( "option", "animate" );<br> <br>// setter<br>$( ".selector" ).accordion( "option", "animate", "bounceslide" );	{}
collapsible	Boolean	Whether all sections can be closed at once. Allows the activated section to be collapsed. <br> Code example: Initialize an accordion with a specified collapsible option: $( ".selector" ).accordion({ collapsible: true }); After initialization, get or set the collapsible option: // getter<br>var collapsible = $( ".selector" ).accordion( "option", "collapsible" );<br> <br>// setter<br>$( ".selector" ).accordion( "option", "collapsible", true );	false
disabled	Boolean	If set to true, disables the accordion. <br> Code example: Initialize an accordion with a specified disabled option: $( ".selector" ).accordion({ disabled: true }); After initialization, get or set the disabled option: // getter<br>var disabled = $( ".selector" ).accordion( "option", "disabled" );<br> <br>// setter<br>$( ".selector" ).accordion( "option", "disabled", true );	false
event	String	Events that the accordion header will react to, used to activate the relevant panel. Multiple events can be specified, separated by spaces. <br> Code example: Initialize an accordion with a specified event option: $( ".selector" ).accordion({ event: "mouseover" }); After initialization, get or set the event option: // getter<br>var event = $( ".selector" ).accordion( "option", "event" );<br> <br>// setter<br>$( ".selector" ).accordion( "option", "event", "mouseover" );	"click"
header	Selector	Selector for the header elements, applied through .find() on the main accordion element. The content panels must be sibling elements immediately following their associated headers. <br> Code example: Initialize an accordion with a specified header option: $( ".selector" ).accordion({ header: "h3" }); After initialization, get or set the header option: // getter<br>var header = $( ".selector" ).accordion( "option", "header" );<br> <br>// setter<br>$( ".selector" ).accordion( "option", "header", "h3" );	"> li > :first-child,> :not(li):even"
heightStyle	String	Controls the height of the accordion and each panel. Possible values: <br> "auto": All panels will be set to the height of the tallest panel. <br> "fill": Extends to the height available based on the accordion's parent height. <br> "content": Each panel's height depends on its content. Code example: Initialize an accordion with a specified heightStyle option: $( ".selector" ).accordion({ heightStyle: "fill" }); After initialization, get or set the heightStyle option: // getter<br>var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );<br> <br>// setter<br>$( ".selector" ).accordion( "option", "heightStyle", "fill" );	"auto"
icons	Object	Icons to be used for the headers, with false indicating no icons. <br> header (string, default: "ui-icon-triangle-1-e") <br> activeHeader (string, default: "ui-icon-triangle-1-s") Code example: Initialize an accordion with a specified icons option: $( ".selector" ).accordion({ icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }); After initialization, get or set the icons option: // getter<br>var icons = $( ".selector" ).accordion( "option", "icons" );<br> <br>// setter<br>$( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );	{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }

| Method | Return | Description | | destroy() | jQuery (plugin only) | Completely removes the accordion functionality. This will return the element to its pre-init state. <br> This method does not accept any parameters. Code example: Call the destroy method: $( ".selector" ).accordion( "destroy" ); | | disable() | jQuery (plugin only) | Disables the accordion. <br> This method does not accept any parameters. Code example: Call the disable method: $( ".selector" ).accordion( "disable" ); | | enable() | jQuery (plugin only) | Enables the accordion. <br> This method does not accept any parameters. Code example: Call the enable method: $( ".selector" ).accordion( "enable" ); | | option( optionName ) | Object | Gets the value currently associated with the specified optionName. <br> optionName<br> Type: String<br> Description: The name of the option to get. Code example: Call the method: var isDisabled = $( ".selector" ).accordion( "option", "disabled" ); | | option() | PlainObject | Gets an object containing key/value pairs representing the current accordion options hash. <br> This method does not accept any parameters. Code example: Call the method: var options = $( ".selector" ).accordion( "option" ); | | option( optionName, value ) | jQuery (plugin only) | Sets the value of the accordion option associated with the specified optionName. <br> optionName<br> Type: String<br> Description: The name of the option to set.<br> value<br> Type: Object<br> Description: The value to set for the option. Code example: Call the method: $( ".selector" ).accordion( "option", "disabled", true ); | | option( options ) | jQuery (plugin only) | Sets one or more options for the accordion. <br> options<br> Type: Object<br> Description: A map of option-value pairs to set. Code example: Call the method: $( ".selector" ).accordion( "option", { disabled: true } ); | | refresh() | jQuery (plugin only) | Processes any headers and panels that were added or removed directly in the DOM and re-calculates the height of the accordion. The result depends on the content and the heightStyle option. <br> This method does not accept any parameters. Code example: Call the refresh method: $( ".selector" ).accordion( "refresh" ); | | widget() | jQuery | Returns a jQuery object containing the accordion. <br> This method does not accept any parameters. Code example: Call the widget method: var widget = $( ".selector" ).accordion( "widget" ); |

| Event | Type | Description | | activate( event, ui ) | accordionactivate | Triggered after a panel is activated (after the 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.
Note: Since the activate event is only triggered when a panel is activated, the initial panel when creating the accordion widget will not trigger this event. If you need a hook for widget creation, use the create event.
event
Type: Event
ui
Type: Object
newHeader
Type: jQuery
Description: The header that was just activated.
oldHeader
Type: jQuery
Description: The header that was just deactivated.
newPanel
Type: jQuery
Description: The panel that was just activated.
oldPanel
Type: jQuery
Description: The panel that was just deactivated.
Code example: Initialize an accordion with the specified activate callback:
$( ".selector" ).accordion({
activate: function( event, ui ) {}
});
Bind an event listener to the accordionactivate event:
$( ".selector" ).on( "accordionactivate", function( event, ui ) {} );
| beforeActivate( event, ui ) | accordionbeforeactivate | Triggered directly before a panel is activated. Can be canceled to prevent the panel from being activated. 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
Description: The header that is about to be activated.
oldHeader
Type: jQuery
Description: The header that is about to be deactivated.
newPanel
Type: jQuery
Description: The panel that is about to be activated.
oldPanel
Type: jQuery
Description: The panel that is about to be deactivated.
Code example: Initialize an accordion with the specified beforeActivate callback:
$( ".selector" ).accordion({
beforeActivate: function( event, ui ) {}
});
Bind an event listener to the accordionbeforeactivate event:
$( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} );
| create( event, ui ) | 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
Description: The activated header.
panel
Type: jQuery
Description: The activated panel.
Code example: Initialize an accordion with the specified create callback:
$( ".selector" ).accordion({
create: function( event, ui ) {}
});
Bind an event listener to the accordioncreate event:
$( ".selector" ).on( "accordioncreate", function( event, ui ) {} ); <html lang="en"> <head> <meta charset="utf-8"> <title>Accordion Widget Demonstration</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/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>

</body> </html>

View Demo

❮ Ref Effects Api Scale Effect ❯