• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Accordion

This version was saved 12 years ago View current version     Page history
Saved by Jörn Zaefferer
on March 19, 2012 at 5:24:21 am
 

 

type: widget

release: 1.5

status: complete

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

demo: http://jqueryui.com/demos/accordion

 

TODOs

  • ARIA updates: 
    • aria-expanded is supposed to go on the role="tabpanel" elements, not the role="tab" elements, they only need aria-selected
    • a style issue: there is no visual focus indicator for the currently opened accordion header
    • focus is lost when an accordion header is collapsed in a a collapsible accordion 
    • up for debate:  People have been complaining that when they tab out of a accordion panel, they expect focus to go to the next accordion header rather than focus moving past the entire 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
  • 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])
      • 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 accordion 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 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://jquery-ui.googlecode.com/svn/trunk/demos/accordion/default.html

 


 

6 - Open issues being discussed

 

Comments (0)

You don't have permission to comment on this page.