YouTip

## Category (#) ## Usage **Description:** Transforms pairs of headers and content panels into an accordion. **Added in:** 1.0 The accordion container's markup requires pairs of headers and content panels. The accordion supports arbitrary markup, but each content panel must be the immediate sibling following its associated header. See the [`header`](#) option for how to use custom markup structures. Panels can be activated programmatically by setting the [`active`](#) option. ### Keyboard Interaction When focus is on a header, the following keyboard commands are available: * UP/LEFT - Moves focus to the previous header. If on the first header, moves focus to the last header. * DOWN/RIGHT - Moves focus to the next header. If on the last header, moves focus to the first header. * HOME - Moves focus to the first header. * END - Moves focus to the last header. * SPACE/ENTER - Activates the panel associated with the focused header. When focus is in a panel, the following keyboard commands are available: * CTRL+UP: Moves focus to the associated header. ### Theming The Accordion Widget uses the (#) to define its look and feel. For styling the accordion specifically, the following CSS class names can be used: * `ui-accordion`: The outer container of the accordion. * `ui-accordion-header`: The header of the accordion. If the header contains [`icons`](#), the header will also have the `ui-accordion-icons` class. * `ui-accordion-content`: The content panel of the accordion. ### Dependencies (optional; used with the [`animate`](#) option) ### Additional Notes * This widget requires some functional CSS to work properly. If you are creating a custom theme, use the widget-specific CSS file as a starting point. ### Quick Navigation | Options | Methods | Events | | --- | --- | --- | | (#) (#) (#) (#) (#) (#) (#) (#) | (#) (#) (#) (#) (#) (#) | (#) (#) (#) | | Option | Type | Description | Default | | --- | --- | --- | --- | | active | Boolean or Integer | 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 index of the panel to open, zero-based. A negative value selects panels from the end. **Code examples:** Initialize the accordion with the `active` option specified: $( ".selector" ).accordion({ active: 2 }); After initialization, get or set the `active` option: // gettervar active = $( ".selector" ).accordion( "option", "active" ); // setter $( ".selector" ).accordion( "option", "active", 2 ); | 0 | | animate | Boolean or Number or String or Object | Whether and how to animate changing panels. **Multiple types supported:** * **Boolean**: A value of `false` disables animation. * **Number**: The default duration for the easing, in milliseconds. * **String**: The name of the (#) to use for the default duration. * **Object**: Animation settings with `easing` and `duration` properties. * Any of the above options can include a `down` property. * The "Down" animation occurs when the activated panel has a lower index than the currently active panel. **Code examples:** Initialize the accordion with the `animate` option specified: $( ".selector" ).accordion({ animate: "bounceslide" }); After initialization, get or set the `animate` option: // gettervar animate = $( ".selector" ).accordion( "option", "animate" ); // setter $( ".selector" ).accordion( "option", "animate", "bounceslide" ); | {} | | collapsible | Boolean | Whether all 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 }); After initialization, get or set the `collapsible` option: // gettervar collapsible = $( ".selector" ).accordion( "option", "collapsible" ); // setter $( ".selector" ).accordion( "option", "collapsible", true ); | false | | disabled | Boolean | If set to `true`, disables the accordion. **Code examples:** Initialize the accordion with the `disabled` option specified: $( ".selector" ).accordion({ disabled: true }); After initialization, get or set the `disabled` option: // gettervar disabled = $( ".selector" ).accordion( "option", "disabled" ); // setter $( ".selector" ).accordion( "option", "disabled", true ); | false | | event | String | The event that accordion headers react to in order to activate the associated panel. Multiple events can be specified, separated by a space. **Code examples:** Initialize the accordion with the `event` option specified: $( ".selector" ).accordion({ event: "mouseover" }); After initialization, get or set the `event` option: // gettervar event = $( ".selector" ).accordion( "option", "event" ); // setter $( ".selector" ).accordion( "option", "event", "mouseover" ); | "click" | | header | Selector | Selector for the header elements, applied via `.find()` on the main accordion element. Content panels must be the immediate sibling following their associated header. **Code examples:** Initialize the accordion with the `header` option specified: $( ".selector" ).accordion({ header: "h3" }); After initialization, get or set the `header` option: // gettervar header = $( ".selector" ).accordion( "option", "header" ); // setter $( ".selector" ).accordion( "option", "header", "h3" ); | "> li > :first-child,> :not(li):even" | | heightStyle | String | 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's height is determined by its content. **Code examples:** Initialize the accordion with the `heightStyle` option specified: $( ".selector" ).accordion({ heightStyle: "fill" }); After initialization, get or set the `heightStyle` option: // gettervar heightStyle = $( ".selector" ).accordion( "option", "heightStyle" ); // setter $( ".selector" ).accordion( "option", "heightStyle", "fill" ); | "auto" | | icons | Object | Icons to use for headers, matching the (#). Set to `false` to not display icons. * 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", "activeHeader": "ui-icon-minus" } }); After initialization, get or set the `icons` option: // gettervar icons = $( ".selector" ).accordion( "option", "icons" ); // setter $( ".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 | Returns | Description | | --- | --- | --- | | destroy() | 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: $( ".selector" ).accordion( "destroy" ); | | disable() | jQuery (plugin only) | Disables the accordion. * This method does not accept any arguments. **Code examples:** Invoke the disable method: $( ".selector" ).accordion( "disable" ); | | enable() | jQuery (plugin only) | Enables the accordion. * This method does not accept any arguments. **Code examples:** Invoke the enable method: $( ".selector" ).accordion( "enable" ); | | option( optionName ) | Object | Gets the value currently associated with the specified `optionName`. * **optionName** Type: String Description: The name of the option to get. **Code examples:** Invoke the method: var isDisabled = $( ".selector" ).accordion( "option", "disabled" ); | | option() | 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 ) | jQuery (plugin only) | Sets the value of the accordion option associated with the specified `optionName`. * **optionName** Type: String Description: The name of the option to set. * **value** Type: Object Description: The value to set for the option. **Code examples:** Invoke the method: $( ".selector" ).accordion( "option", "disabled", true ); | | option( options ) | jQuery (plugin only) | Sets one or more options for the accordion. * **options** Type: Object Description: A map of option-value pairs to set. **Code examples:** Invoke 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 recomputes the height of the accordion. 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() | 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" ); | | Event | Type | Description | | --- | --- | --- | | activate( event, ui ) | accordionactivate | Triggered after a panel has been 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 only fires when a panel is activated, the initial panel will not trigger this event when the accordion widget is created. If you need a hook for widget creation, use the `create` event.** * **event** Type: Event * **ui** Type: Object * **newHeader** Type: jQuery Description: The newly activated header. * **oldHeader** Type: jQuery Description: The header that was just deactivated. * **newPanel** Type: jQuery Description: The newly activated panel. * **oldPanel** Type: jQuery Description: 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 ) | accordionbeforeactivate | Triggered immediately 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 about to be activated. * **oldHeader** Type: jQuery Description: The header about to be deactivated. * **newPanel** Type: jQuery Description: The panel about to be activated. * **oldPanel** Type: jQuery Description: The panel 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 ) | 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 active header. * **panel** Type: jQuery Description: 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 ) {} ); | ## Examples A simple jQuery UI Accordion. $( "#accordion" ).accordion();