Jquery: Widget – Accordion


Basic syntax

$(selector, context).accordion (options);
active  Which panel is currently open.
Multiple types supported: Boolean and Integer
animateIf and how to animate changing panels. Multiple types supported: Boolean, Number, String and Object
collapsible Whether all the sections can be closed at once. Allows collapsing the active section.
disabledDisables the accordion if set to true
eventThe event that accordion headers will react to in order to activate the associated panel. Multiple events can be specified, separated by a space.
headerSelector for the header element, applied via .find() on the main accordion element. Content panels must be the sibling immediately after their associated headers.
heightStyleControls the height of the accordion and each panel. Possible values: “auto”, “fill” and “content”
iconsIcons to use for headers, matching an icon provided by the jQuery UI CSS Framework. Set to false to have no icons displayed.


Basic syntax

$(selector, context).accordion ("action", params);
destroy()Removes the accordion functionality completely. This will return the element back to its pre-init state.
disable()Disables the accordion.
enable()Enables the accordion.
instance()Retrieves the accordion’s instance object. If the element does not have an associated instance, undefined is returned.
option( optionName )Gets the value currently associated with the specified optionName.
option()Gets an object containing key/value pairs representing the current accordion options hash.
option( optionName, value )Sets the value of the accordion option associated with the specified optionName.
option( options )Sets one or more options for the accordion.
refresh()Process any headers and panels that were added or removed directly in the DOM and recompute the height of the accordion panels. Results depend on the content and the heightStyle option
widget()Returns a jQuery object containing the accordion.


Event MethodDescription
activate( event, ui )Triggered after a panel has been activated (after the animation completes).
beforeActivate( event, ui )Triggered directly before a panel is activated. Can be canceled to prevent the panel from activating. 
create( event, ui )Triggered when the autocomplete is created.

Leave a Reply

Your email address will not be published. Required fields are marked *