jQuery Accordion

The jQuery Accordion plugin is used to create accordion menus. It is usually used with nested lists, definition lists, or nested divs. Options are used to specify the structure, the active element, and custom animations.

This plugin is nowjQuery UIpart of ..., the standalone version will no longer be updated. The current version is 1.6.

jQuery Accordion official website, jQuery Accordion plugin download:http://www.example.com/try/download/jquery-accordion.zip。

For more details about Accordion, please see the API documentationAccordion Widget。

Standard

The standard code is as follows:

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

Navigation

An 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 the title as dt and the content as 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'); 
});

Other extensions