This is a YUI Accordion widget. It can do many different things. See the bottom 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.
This thing is a work in progress. Feel free to have a look at the source or play around with it but don't expect it to be rock solid yet. It's NOT finished.
Comments, hints, cheers, flames, they're all welcome.
Copyright ©2008 Marco van Hylckama Vlieg
menu1 = new YAHOO.widget.AccordionView('mymenu', {collapsible: false, width: '400px', expandItem: 2, animationSpeed: '0.7', animate: true, effect: YAHOO.util.Easing.easeIn});
We also dynamically add a panel at index 2:
menu1.addPanel({label: 'Dynamically added panel', content: '<p>This was inserted dynamically at index 2</p><p>This was inserted dynamically at index 2</p><p>This was inserted dynamically at index 2</p><p>This was inserted dynamically at index 2</p><p>This was inserted dynamically at index 2</p><p>This was inserted dynamically at index 2</p>'}, 2);
menu2 = new YAHOO.widget.AccordionView('mymenu2', {animationSpeed: '0.6', expandItem: 0, width: '600px', animate: true, effect: YAHOO.util.Easing.bounceOut});
Inside menu item 2 is a nested menu with:
menu3 = new YAHOO.widget.AccordionView('mymenu3', {collapsible: false, width: '250px', expandItem: 2, animationSpeed: '0.5', animate: true, effect: YAHOO.util.Easing.easeNone});
menu4 = new YAHOO.widget.AccordionView('mymenu4', {width: '200px', animate: false, expandable: true});
Atributes: