The best jQuery Accordion Tutorial In 2024, In this tutorial you can learn standard,navigation,With the option,
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.w3write.com/try/download/jquery-accordion.zip .
For more details about Accordion, please see the API documentation folding panel member (Accordion the Widget) .
Standard code is as follows:
jQuery('#list1a').accordion(); jQuery('#list1b').accordion({ autoheight: false });
Unordered list with anchor and nested list
jQuery('#navigation').accordion({ active: false, header: '.head', navigation: true, event: 'mouseover', fillSpace: true, animated: 'easeslide' });
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'); });