Web Development with jQuery (2015)

Method

Description

Return Value

Showing and Hiding Methods

accordion(options)

Makes the selected elements into accordions (see “Accordion Options”).

jQuery

accordion('destroy')

Destroys the selected accordion.

jQuery

accordion('disable')

Disables the selected accordion.

jQuery

accordion('enable')

Enables the selected accordion.

jQuery

accordion('option')

Returns an object containing all the options and their values.

Object

accordion('refresh')

Recalculates accordion panels, headers, and heights after modifying an accordion.

jQuery

accordion('widget')

Returns a jQuery object that contains the accordion.

jQuery

Accordion Options

Option

Description

Type

active

Determines which panel is open, if any. If the value is set to false, all panels are collapsed. (This requires the collapsible option to be set true. If the value is set to an integer, it opens the corresponding panel, offset from zero.)
Default value: 0

Boolean, Integer

animate

Options for animating the panels. Setting the value to false disables animation. Setting the value to a number sets the length of the animation in milliseconds with the easing effect. If the value is a string, the string is the type of easing animation (see Appendix M, “Effects”). An object can also be provided with easing and duration properties.
Default value: {}

Boolean, Number, String, Object

collapsible

Whether all the accordion sections can be closed at once.
Default value: false

Boolean

disabled

Whether the accordion is disabled.
Default value: false

Boolean

event

The event used to trigger the accordion.
Default value: click

String

header

Selector referencing the element to use for the header element for each content panel.
Default value: "> li > :first-child,> :not(li):even"

Selector, Element, jQuery

heightStyle

Determines how the height of each panel is calculated.
"auto"—The height of each panel will be the height of the tallest panel.
"fill"—The height of each panel is determined by the accordion's parent element.
"content"—The height of each panel is determined by the content within each panel.
Default value: "auto"

String

icons

Icons to use for headers.
Default value:
{
"header" :
"ui-icon-triangle-1-e", "activeHeader" :
"ui-icon-triangle-1-s"
}

Object

Accordion Events

activate

Triggered once a panel is activated (after the animation has finished).

function (event, ui)

beforeActivate

Triggered once a panel is opened, before animation begins. Can be canceled to prevent a panel from activating.

function (event, ui)

create

Triggered when an accordion is created.

function (event, ui)

Option

Description

Type

ui.header

The active header.

jQuery

ui.newHeader

The header of the panel about to be activated.

jQuery

ui.newPanel

The panel about to be activated.

jQuery

ui.oldHeader

The header of the panel about to be deactivated.

jQuery

ui.oldPanel

The panel about to be deactivated.

jQuery

ui.panel

The active panel.

jQuery