Search within TutorialsPark

jQuery UI : Accordion Events


Learn how to use jQuery UI Accordion Events to Trigger Events


jQuery UI : Accordion Events

jQuery UI Accordion events has three custom events, these are the methods of activate , beforeActivate and create.

The event activate is triggered every time a header is actived, the event is fired when the animation is done performing.

The event beforeActivate event is fired when a accordion header is selected, before the animation begins.

The event create is fired when the accodion widget is initialized.


Table : Accordion Events

Events Description
activate Event is fired when the accordion header is activated, and done performing the animation
beforeActivate Event is fired when the accordion header is activated, and animation is yet to begin.
create Event is triggered before the active content is chan

jQuery UI Accordion: Change Event

jQuery UI Accordion activate event is fired when the accordion header is activated, and done performing the related animation.

Example: jQuery Accordion UI - Using Activate Method to Control Accordion

Give it a TRY! » Note: A Notification is displayed when the animation is done performing , using event activate


jQuery UI Accordion : Using the beforeActivate event

The jQuery UI beforeActivate event is used to activate the specifed accordion header, but the event is fired before any transition animation begins to perform.

Example: jQuery Accordion UI - Changing the Trigger Event

Give it a TRY! » Note: The use of beforeActivate is to trigger action before the transition animation begins.


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 AutoComplete UI - Changing the Trigger Event

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