Easy Tutorial
❮ Misc Deferred Promise Misc Deferred State ❯

jQuery Accordion

The jQuery Accordion plugin is used to create collapsible menus. It is commonly used with nested lists, definition lists, or nested divs. Options are available to specify the structure, active elements, and custom animations.

This plugin is now part of jQuery UI, and standalone versions will no longer be updated. The current version is 1.6.

jQuery Accordion Official Website, jQuery Accordion Plugin Download: http://www.tutorialpro.org/try/download/jquery-accordion.zip.

For more details about Accordion, please refer to 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

The container is a definition list, with dt as the header and dd as the content.

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

View Demo Source Code Download

❮ Misc Deferred Promise Misc Deferred State ❯