Accordion Widget version added: 1.0
Description: Convert a pair of headers and content panels into an accordion.
The markup of your accordion container needs pairs of headers and content panels:
1
2
3
4
5
6
|
|
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
0
- Boolean: Setting
active
tofalse
will collapse all panels. This requires thecollapsible
option to betrue
. - Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.
Initialize the accordion with the active option specified:
1 |
|
Get or set the active option, after initialization:
1 2 3 4 5 |
|
animateType: Boolean or Number or String or Object
{}
- 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
andduration
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.
- Can also contain a
Initialize the accordion with the animate option specified:
1 |
|
Get or set the animate option, after initialization:
1 2 3 4 5 |
|
collapsibleType: Boolean
false
Initialize the accordion with the collapsible option specified:
1
|
|
Get or set the collapsible option, after initialization:
1
2
3
4
5
|
|
disabledType: Boolean
false
true
.Initialize the accordion with the disabled option specified:
1
|
|
Get or set the disabled option, after initialization:
1
2
3
4
5
|
|
eventType: String
"click"
Initialize the accordion with the event option specified:
1
|
|
Get or set the event option, after initialization:
1
2
3
4
5
|
|
headerType: Selector
"> 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.
Initialize the accordion with the header option specified:
1
|
|
Get or set the header option, after initialization:
1
2
3
4
5
|
|
heightStyleType: String
"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.
Initialize the accordion with the heightStyle option specified:
1
|
|
Get or set the heightStyle option, after initialization:
1
2
3
4
5
|
|
iconsType: Object
{ "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")
Initialize the accordion with the icons option specified:
1
|
|
Get or set the icons option, after initialization:
1
2
3
4
5
|
|
Methods
destroy()
-
This method does not accept any arguments.
Invoke the destroy method:
1
|
|
disable()
-
This method does not accept any arguments.
Invoke the disable method:
1
|
|
enable()
-
This method does not accept any arguments.
Invoke the enable method:
1
|
|
option( optionName )Returns: Object
optionName
.-
optionNameType: StringThe name of the option to get.
Invoke the method:
1
|
|
option()Returns: PlainObject
-
This method does not accept any arguments.
Invoke the method:
1
|
|
option( optionName, value )
optionName
.-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
1
|
|
option( options )
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
1
|
|
refresh()
heightStyle
option.-
This method does not accept any arguments.
Invoke the refresh method:
1
|
|
widget()Returns: jQuery
jQuery
object containing the accordion.-
This method does not accept any arguments.
Invoke the widget method:
1
|
|
Events
activate( event, ui )Type: accordionactivate
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.Initialize the accordion with the activate callback specified:
1
2
3
|
|
Bind an event listener to the accordionactivate event:
1
|
|
beforeActivate( event, ui )Type: accordionbeforeactivate
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.Initialize the accordion with the beforeActivate callback specified:
1
2
3
|
|
Bind an event listener to the accordionbeforeactivate event:
1
|
|
create( event, ui )Type: accordioncreate
ui.header
and ui.panel
will be empty jQuery objects.Initialize the accordion with the create callback specified:
1
2
3
|
|
Bind an event listener to the accordioncreate event:
1
|
|
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
|
|