YUI AccordionView widget

Examples first!

Here's some examples of how you can use the widget. I'm working on more examples. If you would like to see a specific example feel free to email me and I may consider creating one!

• Basic usage, from markup
• Nested accordions
• Dynamic, creation from script
• A menu
• 'Apple' style accordion with mouseover action
• A sophisticated form wrapped inside an accordion
• A feed reader combining AccordionView and TabView for a compact UI

API Documentation

Documentation is available here.

Update Log

• Sunday July 20, 2008 - initial release
• Monday July 21, 2008 - Fixed a small bug where clicking the + / - icons wouldn't open a panel
• Tuesday July 22, 2008 - Code cleanup, added hoverActivated configuration option
• Tuesday July 22, 2008 - Applied a (hopefully temporary) rather nasty IE6 fix related to nested menus not displaying
• Wednesday July 23, 2008 - Fix that makes external links within panels work right in all browsers
• Tuesday July 24, 2008 - Fixed the above fix (DOH) because it was applied to ALL browsers instead of just IE6
• Saturday, Jul 26, 2008 - Improvements resulting in better YUI widget compliancy. Enabled runtime modification of configuration options. Beter use of inheritance of Element. Various cleanups.
• Sunday, Jul 27, 2008 - Ability to create menus from scratch. Extremely simple markup requirements: list items with any two elements in them. Added ARIA roles and states for enhanced accessibility. Further code cleanups and enhancements. Note that this new version should be 100% backward compatible with the earlier one.
• Wednesday, Jul 30, 2008 - Fixed a small bug that made it impossible to enable panel [1] by default. Added custom events for important Accordion events. Added a timeout for the hover activated accordion. Added missing documentation. Started providing a YUI compressed version of accordionview.js. Various small fixes. Provided more interesting examples. Added openPanel and closePanel methods.
• Saturday, Aug 2, 2008 - Tiny bugfix related to creating accordions from script. Added the feed reader example.
• Sunday, Aug 3, 2008 - A whole slew of internal code improvements and a few minor bugfixes.
• Wednesday, Aug 6, 2008 - Proper event delegation in place, various fixes, IE6 tweaks.
• Thursday, Aug 7, 2008 - Small fix in openPanel method, made ARIA stuff conditional (only IE8 and FF3). Added API documentation.
• Sunday, Aug 10, 2008 - Added menu example and modified the widget to support items that don't have a panel. Moved +/- indicators to the right to facilitate this new behavior better. Eliminated flash in Gecko < 1.9
• Saturday, Aug 16, 2008 - Added full keyboard navigation. New custom event 'stateChanged'. Several parts refactored, bugfixes. Lots of good stuff. Updated API documentation.
• Tuesday, Aug 19, 2008 - Internal robustness improvements
• Thursday, Aug 21, 2008 - Made tag names configurable, documented all custom Events, code reorganisation and a few minor bugfixes

Download

You can download an archive of this demo here.

Check back regularly as this widget is a work in progress and this page and the archive will probably get updated.

License: BSD License.

Dependencies

This widget depends on the YUI utilities rollup file and the YUI reset-fonts CSS file and of course it's own CSS and javascript. See the sourcecode of the demo page for details.

Markup to use

1. •  
   • Item 1
   •  
   •  
   •  
   •  
   •  
   • Item 2
   •  
   •  
   •  
   •  
   •  
   • Item 3
   •  
   •  
   •  
   •  
   •  
   • Item 4
   •  
   •  
   •  
   •  
   • ...
   • ...
   • ...
   •  

Note: this means you can use ANY two elements inside the list elements. The first one contains the label text and the second one whatever content you want to show in the accordion.

Invocation

accordion = new YAHOO.widget.AccordionView('mymenu', options);

options is an object containing various configurable parameters. All available options are:

• width: css value for width including unit (example: '400px', '15em', etc.)
• expandItem: index of item to expand at initialization, default is none. 0 is the first, 1 the second, etc.
• animationSpeed: speed in seconds for animation. The default is 0.7
• animate: true or false, default is true
• effect: YUI Animation effect to use on animation. See the documentation on YAHOO.util.Easing. Default is YAHOO.util.Easing.easeBoth
• collapsible: true or false, whether the whole thing can be collapsed or not, default is true
• expandable: true or false, whether the whole thing can expand (true) or act as an accordion where only one item can be open (false). default is false
• hoverActivated: true or false, when set to true, the items are activated on hover. Note that this activates on click ALSO in order to keep keyboard navigation working.
• hoverTimeout: time in milliseconds to way for a toggle when hoverActivated is used. Default is 500ms

The above parameters (except for expandItem and hoverActivated) can be changed at runtime. So let's say we have an AccordionView widget with ID coolMenu. We can then change the animation speed at runtime:

coolMenu.set('animationSpeed', 1.5)

Keyboard navigation

The widget now has full keyboard navigation. At any time, only opened panels have tabIndex. Once an open element has focus you can use up/left to move focus up and down/right to move focus down. Enter toggles the panel. When all panels are closed, the first item in the widget has tabIndex to still be able to tab into the widget.

A basic example

• Item 1

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pellentesque. Nunc justo mauris, ultricies et, consequat ac, tristique congue, enim. Vestibulum tempor ultrices leo. Nam venenatis arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse facilisis bibendum mauris.

• Item 2

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Ut eleifend dui accumsan lorem.
  • Donec fermentum consectetuer purus.
  • Curabitur bibendum elit a nibh.
  • Curabitur fringilla velit sit amet diam.
  • Proin bibendum orci eget ante.

• Item 3

  Morbi commodo dignissim odio. Donec ac velit id elit molestie consectetuer. Vivamus ac ligula sit amet mi aliquam accumsan. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pede pede, convallis sit amet, condimentum a, accumsan tristique, tellus. In justo mi, interdum tempor, fermentum ut, porttitor at, lacus. Nulla lobortis commodo enim. Suspendisse varius auctor est. Phasellus sodales egestas leo.

• Item 4

  image1 image2 image3

This AccordionView can be collapsed, is 400px wide, has the third item expanded by default, animates at a speed of 0.3 seconds with the YAHOO.util.Easing.easeBothStrong effect.

menu1 = new YAHOO.widget.AccordionView('mymenu', {collapsible: true, width: '400px', expandItem: 2, animationSpeed: '0.3', animate: true, effect: YAHOO.util.Easing.easeBothStrong}

We also dynamically add a panel:

menu1.addPanel({label: 'Dynamically added panel', content: 'This was inserted dynamically. This was inserted dynamically. This was inserted dynamically. This was inserted dynamically. This was inserted dynamically.'});