Accordion widget, ver. 1.12

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

The current version of Accordion is using YUI 3.3.0. If you are looking for an older version of Accordion, take a look at Changelog section.

03.01.2011 - ver. 1.12
- Closing an item can be prevented.
- 'itemChosen' property supports multiple events - for example ['mouseenter', 'click'].


03.01.2011 - ver. 1.11
- Deprecated/removed YUI API functions (like "Node.query", "Node.queryAll" and "Y.get") have been replaced with their alternatives.


09.06.2010 - ver. 1.10
- Fixed bug which caused firing itemExpanded event twice.
- Events will be not published in Accordion explicitly, but they will be created only if needed.


06.05.2010 - ver. 1.091
- Accordion migrated to YUI 3.1.1. No code changes.


01.04.2010 - ver. 1.09
- Accordion migrated to YUI 3.1. A lot of internal changes and improvements, but should work with the existing configurations. The main difference is when instantiating - there is no need to pass contentBox/boundingBox as configuration parameters. Instead, you should set "srcNode" only. All Accordion classes has been renamed to start with yui3. Accordion is has been created by using Base.create instead Y.extend and Base.build The method _getConfigDOMAttribute has been removed and Widget's _applyParser has been overwritten in order to parse and prepare yuiConfig attribiute for HTML_PARSER.


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