Tutorial by Examples

To use an accordion, one must have headers and content inside the headers in their HTML. Then one must instantiate the accordion() method of jQuery UI. <script> $(function() { $( "#accordion" ).accordion(); }); </script> In the HTML: <div id="accordion&quot...

$( "#accordion" ).accordion( "destroy" ); This will remove the accordion functionality completely and show default HTML removing all the jQuery-UI elements. This method does not take any arguments.

$( "#accordion" ).accordion( "disable" ); This method will disable the accordion, i.e. the headers are not selectable making the content read only and static. This method does not take any arguments.

$( "#accordion" ).accordion( "enable" ); This method will enable an accordion. This will enable a disabled accordion or simply do nothing on an already enabled accordion. This method does not take any arguments.

var options = $( "#accordion" ).accordion( "option" ); This will return a PlainObject giving all the options representing the selected accordion. This will contain all the values of the keys that are explained in the Parameters section. This method takes parameters which are ...

$( "#accordion" ).accordion( "refresh" ); This method recomputes the height of the accordion panels if headers or content was added or removed in the DOM.

var widget = $( "#accordion" ).accordion( "widget" ); This method returns a jQuery object containing the accordion.