type: widget
release: 1.5
status: released
documentation: http://api.jqueryui.com/accordion/
demo: http://jqueryui.com/accordion/
1 - Description:
An expandable/collapsible content pane. Applicable when content must be displayed within limited space. Accordions are most commonly seen in the stacked vertical style on the web, but a horizontal accordion, where clickable tabs are rotated 90 degress to the left, should also be considered. We'd need to determine how to display the text for a horizonal accordion since rotating text is not possible in HTML and stacking each letter of the label on a separate line looks odd.
An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this.
2 - Visual Design:
3 - Functional Specifications/Requirements:
An accordion consists of a list of header/content pairs. Headers are always visible, while at most one content panel is visible. Switching between content panels works by clicking headers or navigating with the keyboard - when the accordion has focus, key up/down change focus between headers, enter activates the content of the selected header.
Options
- active (integer, boolean, default: 0)
- the zero-based index of the panel that is active (open).
- negative values select panels going backward from the last panel
- when collapsible: true, active: false closes the accordion, otherwise nothing happens
- animate (mixed, default: {})
- string; name of easing to use with default duration
- number, duration in milliseconds with default easing
- object with easing and duration options
- can also contain a down option with any of the above options
- "down" animations occur when the panel being activated has a lower index than the currently active panel
- null/false disables animation
- collapsible (boolean, default: false)
- there can be only one panel open at once; for collapsible:true, all panels can be closed, otherwise exactly one must be open
- disabled (boolean, default: false)
- when disabled, the open panel will remain open and no other planel can be activated
- event (string, default: "click")
- "mouseover" changes the accordion to a hover accordion (probably the only useful alternative)
- header (string, default: "> li > :first-child,> :not(li):even")
- must be a selector that applies to the accordion container element, via .find()
- the default covers both ul/li accordions, as well as flat structures like dl/dt/dd
- heightStyle (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
- icons (hash)
- refers to CSS classes that must match an icon as defined by UI CSS framework:
- header (string, default: "ui-icon-triangle-1-e")
- activeHeader (string, default: "ui-icon-triangle-1-s")
Methods
- refresh
- Recomputes panel dimensions
Events
- beforeActivate (event: [depends on event option])
- triggered directly after a panel is activated
- can be cancelled to prevent the panel from activating
- ui object:
- newHeader (object[jQuery])
- oldHeader (object[jQuery])
- newPanel (object[jQuery])
- oldPanel (object[jQuery])
- activate (event: none)
- triggered after the accordion panel has been activated (after animation completes)
- ui object:
- newHeader (object[jQuery])
- oldHeader (object[jQuery])
- newPanel (object[jQuery])
- oldPanel (object[jQuery])
Keyboard
- When focus is on a header:
- 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.
Accessibility
- Follows ARIA best practices, with the following exceptions:
- aria-multiselectable is not set to true, since we do not allow multiple open panels.
- ctrl+page up/down is not supported because of interference with browser shortcuts, as mentioned in the best practices.
- Added aria-controls on the headers.
- Notes
- Orca starts in caret navigation mode by default, which breaks arrow navigation. The user must press Orca + F12 to switch to Gecko's navigation mode in order to get proper arrow navigation.
- Issues:
- Widget icons indicating expanded/collapsed state are invisible in high contrast mode
- Unable to see focus indication; items have color change on focus, but is lost in high contrast mode.
- JAWS 11 sometimes announces links for acordion headers, sometimes tabs. Problem with reading tab panel content when a link is activated as JAWS goes into forms mode.
4 - Markup & Style:
(only used prior to implementation)
5 - Latest version of plugin:
http://view.jqueryui.com/master/demos/accordion/default.html
6 - Open issues being discussed
Comments (0)
You don't have permission to comment on this page.