.accordion()
Categories: UI
.accordion( [ options ] )
Plugin: jQuery.ui.accordion
Description: Apply the Accordion widget for each element in the set of matched elements
-
.accordion( [ options ] )
version added: 1.0options A map of additional options pass to the widget.
Make the selected elements Accordion widgets. Semantic requirements:
The markup of your accordion container needs pairs of headers and content panels:
<div id="accordion"> <h3><a href="#">First header</a></h3> <div>First content</div> <h3><a href="#">Second header</a></h3> <div>Second content</div> </div>
If you use a different element for the header, specify the header-option with an appropriate selector, eg. header: 'a.header'. The content element must be always next to its header.
If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.
Use activate(Number) to change the active content programmatically.
NOTE: If you want multiple sections open at once, don't use an accordion
An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:
jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle(); return false; }).next().hide(); });
Or animated:
jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); });
-
create
This event is triggered when accordion is created.
-
change
This event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately.
-
changestart
This event is triggered every time the accordion starts to change.
-
destroy
-
.accordion( "destroy" )
version added: 1.0
Remove the accordion functionality completely. This will return the element back to its pre-init state.
-
-
disable
-
.accordion( "disable" )
version added: 1.0
Disable the accordion.
-
-
enable
-
.accordion( "enable" )
version added: 1.0
Enable the accordion.
-
-
option
-
.accordion( "option" , optionName , [value] )
version added: 1.0
Get or set any accordion option. If no value is specified, will act as a getter.
-
-
option
-
.accordion( "option" , options )
version added: 1.0
Set multiple accordion options at once by providing an options object.
-
-
widget
-
.accordion( "widget" )
version added: 1.0
Returns the .ui-accordion element.
-
-
activate
-
.accordion( "activate" , index )
version added: 1.0
Activate a content part of the Accordion programmatically. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass
false
to close all (only possible withcollapsible:true
). -
-
resize
-
.accordion( "resize" )
version added: 1.0
Recompute heights of the accordion contents when using the fillSpace option and the container height changed. For example, when the container is a resizable, this method should be called by its resize-event.
-