Search within TutorialsPark

jQuery UI : Accordion


Learn how to use jQuery UI Accordion


jQuery UI : Accordion

jQuery UI Accordion widget is used to group contents into seperate panels that can be open or closed based on interaction from user end.

At any given time, at the most only one is visible to the user.Each accordion container has a heading element which is used to open the container and display the content within.

Accordion can be used to display content which can be broken in smaller discrete section, thus not making the viewer overwhelmed by lots of content at once.


jQuery UI AutoComplete: Creating a Basic Accordion

jQuery UI Accordion widget is created by using the accordion method on a div element.

The Accordion feature looks for header(h1-h6) to break up the content such that each header has a content associated with it.

In the demo below, the label property is displayed within the strong element.Properties are read from ui.item Object.

Example: jQuery UI Accordion - Create a Basic Accordion

Give it a TRY! » Note: Each Heading with the selected div element gets transformed to an accordion.


jQuery UI Accordion: Configuring the Accordion

jQuery UI Accordion supports multiple settings which can be used to fine-tune the behaviour of accordion.

Table : jQuery Configuring the Accordion

Events Description
active To get or set the content to be displayed. The default is to show the first content element initially.
animate To set the animation to used during transition from one content element to another. The default value is false
autoHeight When set to true, the height of the tallest content element is used for all such elements
clearStyle When set to true, the accordion clears the height and overflow CSS properties after transition animation ends. The default value is false
collapsible When set to true all of the contents section can get collapsed. Default value is false
disabled When set to true the accordion is disabled. The default value is false.
event To set the event on the headers that triggers the drawers to open. Default is click
fillSpace If set as true , the accordion fills the height of the parent element.
header To set the selector for header Elements.
heightStyle To control the height of the accordion and each panel
icons To specify the icon for the header elements and the selected state

jQuery UI Accordion: Setting the Height of Accordion

jQuery UI Accordion setting can be used to set the height of the accordion, based either the height of the content of the accordion elements or the height of the parent element.

The best way to set height is to use default value, which is done by using autoHeight setting, it sets all of the content elements to the same height which is the height of the tallest element.

Example: jQuery Accordion UI - Setting the Height of Accordion

Give it a TRY! » Note: The setting autoHeight is the default setting, it set to true by default.


jQuery UI Accordion : Changing the Trigger Event

The jQuery UI Accordion has a setting to change the trigger Event. The default trigger event is click, but we can trigger it using other events as well.

In the demo below, we create an object called as customEvent which contains the key event and the value Mouseover, which is then passed to the accordion() method as an argument, it overrides the default click event.

Example: jQuery Accordion UI - Changing the Trigger Event

Give it a TRY! » Note:You can even set the options using an inline object within the widget method.


jQuery UI Accordion : Changing the Default Active Header

The jQuery UI Accordion by default open the first header to the viewer.However, we can set which header to open using the option active.

In the demo below, we set the value of the active option to 1 to open the second tab as default(index values are 0 based)

Example: jQuery Accordion UI - Changing the Default Active Header

Give it a TRY! » Note:To open none of the accordion as default, set the value of active to false


jQuery UI Accordion : Filling the Height of the Container

The jQuery UI Accordion configuration option of heightStyle is used to make the accordion to take the full height of its container.

In the demo below, we set the container of the accordion equal to the body element, thus height of the body is the height of the accordion.

Example: jQuery AutoComplete UI - Changing the Trigger Event

Give it a TRY! » Note:The value of heightStyle is set to fill to make the accordion to fill the entire container.


jQuery UI Accordion : Using the Accordion Animation

The jQuery UI Accordion widget has a built in default animation scheme, this default animation can be disabled by setting the Value of animation to false.

You can even set a custom animation by setting the values of duration and easing for the selected accordion.

Example: jQuery AutoComplete UI - Changing the Trigger Event

Give it a TRY! » Note: The easing effect has been set to easeOutBounce to create a Bouncing effect.


jQuery UI Accordion : Changing the Icons of Accordions

The jQuery UI Accordion has an option to change the icons of Accordion headers, there are two properties available header and headerSelected

The property header is used to set the icon when the Accordion is closed, while the property headerSelected is used to set the icon when the accordion is open.

Example: jQuery Accordion UI - Changing the Icons of Accordion

Give it a TRY! » Note: These settings are used in association with the setting collapsible.