The accordion () Method

This accordion () method can be used in two forms:

  • $(selector, context).accordion (options)

  • $(selector, context).accordion ("action", params)

The accordion (options) Method

The accordion (options) method specifies that an HTML element (and its contents) should be managed as accordion menus. The options parameter is an object to specify the appearance and behavior of the involved menus. These options concern the behavior of menus, the height of content, or the events related to these menus.

Options for managing accordion menus

Table 3-1 describes the options for managing the behavior of accordion menus.

Table 3-1. Options for managing the behavior of menus




When set to true, it allows users to close a menu by clicking on it.

When set to false (the default), clicking an open menu does not close it.

Indicates the index of the menu that is open when the page is first accessed. The default is 0 (the first menu).

To specify no open menu at startup, use false.


Name of the event that lets users select a new menu (the default is "click"). If, for example, you specify "mouseover", users can select the menu by moving the mouse over it.


Indicates a visual effect that accompanies selection of a menu. The default is "slide".

Other values can modify the easing parameter value in effect, that is to say, the way to progress in the effect (while retaining a slide-like effect).

The possible values are: "easeInQuad" ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.