jQuery Accordion


jQuery Accordion

jQuery Accordion plugin is used to create accordion menus. It is typically used with nested lists, definition lists, or nested divs. Options are used to specify structure, activated elements, and customized animations.

This plugin is now part of jQuery UI, and the independent version will not be updated. The current version is 1.6.

jQuery Accordion official website, jQuery Accordion plug-in download: http://www.runoob.com/try/download/jquery-accordion.zip.

For more details about Accordion, please view the API documentation Accordion Widget.

Standard

The standard code is as follows:

jQuery('#list1a').accordion(); 
jQuery('#list1b').accordion({ 
    autoheight: false
 });

Navigation

Unordered list with anchors and nested lists

jQuery('#navigation').accordion({ 
    active: false, 
    header: '.head', 
    navigation: true, 
    event: 'mouseover', 
    fillSpace: true, 
    animated: 'easeslide' });

With Options

Container is a definition list with title dt and content dd. 

jQuery('#list2').accordion({ 
    event: 'mouseover', 
    active: '.selected', 
    selectedClass: 'active', 
    animated: "bounceslide", 
    header: "dt" }).bind("change.ui-accordion", function(event, ui) { 
    jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log'); });