YUI AccordionView widget

Accordion Organized form

This is an example of the YUI AccordionView widget in action. This widget was created by Marco van Hylckama Vlieg. All code is licensed under the BSD license.

This form is enclosed in an accordion organized by sections. Try using TAB and SHIFT-TAB to navigate through the form elements and you'll see the appropriate panels open and close and the right elements receiving focus.

Code

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

	menu1.lastTab = null;

	// track use of tab or shift-tab and store it in menu1.lastTab

	YAHOO.util.Event.on('theform', 'keydown', function(e) {
	    if(!e.keyCode === 9) {
	        menu1.lastTab = null;
	        return true;
	    }
	    (e.shiftKey) ? menu1.lastTab = 'shifttab' : menu1.lastTab = 'tab';
	});

	// reset in case we're clicking

	YAHOO.util.Event.on('mymenu', 'click', function(){menu1.lastTab = null;});

	// open panels on focus

	var aElements = menu1.getElementsByClassName('yui-accordion-toggle');
	for(var i=0;i<3;i++) {
	    YAHOO.util.Event.on(aElements[i], 'click', function(){YAHOO.util.Event.stopEvent('focus');});
	    YAHOO.util.Event.on(aElements[i], 'focus', function(){
	        if(menu1.lastTab === 'shifttab') {
	            menu1.openPanel(this - 1);
	        } 
	        else {
	            menu1.openPanel(this);
	        }
	        }, i, true);
	    }

	// use the afterPanelOpen event to set focus to the right form element after the panel has finished
	// opening

	menu1.on('afterPanelOpen', function(){        
	    formElements = arguments[0].panel.getElementsByTagName('INPUT');
	    (menu1.lastTab === 'shifttab') ? formElements[formElements.length-1].focus() : formElements[0].focus();
	    }, this, true);

	// override default removal of tabIndex after a state change. 
	// In this example we want all panels to have a tabIndex anyway.

	menu1.on('stateChanged', function(){
	    var panels = menu1.getPanels();
	    for(i=0;i<panels.length;i++) {
	        panels[i].firstChild.tabIndex = 0;
	    }
	}, this, true);