What is Accordion widget?

Accordion widget, ver. 1.08

Accordion is a visual widget that allows the expansion/collapse of grouped items containing arbitrary data. Accordion items can be added or removed dynamically, reordered via drag-and-drop, closed and set as always visible.
The height of the content inside each item can be set in three different ways:

  • auto - the browser will calculate content height
  • fixed - content height will be exactly X pixels
  • stretch - content height will be calculated, based on the height of the other items in the Accordion
Changelog

25.02.2010 - ver 1.08
- AccordionItem has a new function - resize(). It should be invoked if the content has been updated directly (by using innerHTML). This is neeed only if "contentHeight" property has been set to "auto". The function also causes resizing of all other expanded and stretched items.

22.11.2009 - ver. 1.07
- Parsing data from markup improved for icon, nodeLabel, iconsContainer, iconAlwaysVisible, iconExpanded and iconClose configuration properties.
Valid input is not only Node, but raw HTMLElement and a selector string also.
- Item reordering is false by default, instead true. As result, drag modules are now optional, not required.

06.11.2009 - ver. 1.06
Accordion supports setting config attributes via HTML5 "data-". These are:

  • data-label - string
  • data-expanded - "true", "yes" or "1"
  • data-alwaysvisible - "true", "yes" or "1"
  • data-closable - "true", "yes" or "1"
  • data-contentheight - "auto", "stretch" or "fixed-X", where X is a number

02.11.2009 - ver 1.05:
- Setting item label bugfix

12.10.2009 - ver 1.04:
- AccordionItem - header rewritten

06.10.2009 - ver 1.03:
- Local constants created instead string literals
- Event listeners unbundled
- Removed unnecessary underscores.

30.09.2009:
- Switched to YUI3 GA

29.09.2009:
- Added new example - Overwrite the default properties