type: widget

release: 1.5

status: complete

documentation: http://docs.jquery.com/UI/Accordion

demo: http://jqueryui.com/demos/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, 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
• animated ('slide', 'bounceslide', easing method (anything in jQuery.easing) or false, default: 'slide')
• 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
• 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])
• newContent (object[jQuery])
• oldContent (object[jQuery]) 
• activate (event: none)
• triggered after the accordion panel has been activated (after animation completes)
• ui object:
• newHeader (object[jQuery])
• oldHeader (object[jQuery])
• newContent (object[jQuery])
• oldContent (object[jQuery])

Accessibility

• TBD
• Issues:

• widget icons indicating expanded/collapsed state are invisible in high contrast mode
• Unable to see focus indication for the accordian as a whole recieves focus, items have color change on focus, but is lost in high contrast mode.
• In jaws 11 sometimes announces links for acordian 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://jquery-ui.googlecode.com/svn/trunk/demos/accordion/default.html

6 - Open issues being discussed