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

  • Buried in cloud files? We can help with Spring cleaning!

    Whether you use Dropbox, Drive, G-Suite, OneDrive, Gmail, Slack, Notion, or all of the above, Dokkio will organize your files for you. Try Dokkio (from the makers of PBworks) for free today.

  • Dokkio (from the makers of PBworks) was #2 on Product Hunt! Check out what people are saying by clicking here.



This version was saved 10 years, 3 months ago View current version     Page history
Saved by Scott González
on March 27, 2012 at 9:56:31 am


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.



  • 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")



  • refresh
    • Recomputes panel dimensions



  • 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])



  • When focus is on a header: 
    • UP/LEFT - Move focus to the previous header. If on first header, stay on first header.
    • DOWN/RIGHT - Move focus to the next header. If on last header, stay on last 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. 



  • 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. 
  • 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:





6 - Open issues being discussed


Comments (0)

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