Latest web development tutorials

jQuery Accordion

jQuery Accordion plugin is used to create pulldown menu. It is usually used in conjunction with nested lists, definition lists or nested div. Option is used to specify the structure of the active elements and custom animations.

The plug-in is now jQuery UI part of the stand-alone version will not be updated. The current version is 1.6.

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

For more details about Accordion, please see the API documentation folding panel member (Accordion the Widget) .

standard

Standard code is as follows: 

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

navigation

Unordered list with anchor and nested list 

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

With the option

A container is a list of definitions, the title is dt, the content is 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'); 
});