YUI AccordionView widget

This is a YUI AccordionView widget as seen on the YUI Blog. It can do many different things. See below if this page for configuration options. It even supports nested accordions as you can see by looking at the second item in the second accordion.

It has been skinned with the default YUI 'Sam' look but of course you can style it in any way you like.

While the quality of the widget is definitely improving I still consider it 'beta'. If you encounter any problems, please report them! I'm determined to make this widget rock solid!

Comments, hints, cheers, flames, they're all welcome.

This widget is discussed in this entry on my weblog.

Copyright ©2008 Marco van Hylckama Vlieg.

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!

API Documentation

Documentation is available here.

Update Log

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. <ul id="mymenu">
  2. <li><ANYELEMENT>Item 1</ANYELEMENT>
  3. <ANYELEMENT>
  4. <!-- content goes here -->
  5. </ANYELEMENT>
  6. </li>
  7. <li><ANYELEMENT>Item 2</ANYELEMENT>
  8. <ANYELEMENT>
  9. <!-- content goes here -->
  10. </ANYELEMENT>
  11. </li>
  12. <li><ANYELEMENT>Item 3</ANYELEMENT>
  13. <ANYELEMENT>
  14. <!-- content goes here -->
  15. </ANYELEMENT>
  16. </li>
  17. <li><ANYELEMENT>Item 4</ANYELEMENT>
  18. <ANYELEMENT>
  19. <!-- content goes here -->
  20. </ANYELEMENT>
  21. </li>
  22. ...
  23. ...
  24. ...
  25. </ul>

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:

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

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.'});