Handling Events in Accordion for jQuery

Created: 29 August 2014

Accordion widget consists of multiple groups which can expand horizontally or vertically. Whenever a group is clicked, expanded, selected, removed or any other operation is taken place, a corresponding event is fired. By creating a handler function for a specific event, you can add your own custom code and cancel or perform custom operation. Accordion for jQuery supports the following list of events.

How to Prevent Group from Expanding

Whenever a group header is clicked, the group becomes selected and expanded. This process is followed by beforeexpand and afterexpand events. By handling these events in your code, you can add your own custom action, like locking a specified group and prevent its expansion.

In order to prevent a group to become expanded, we need to handle the beforeexpand event and cancel it. In our example we will prevent the second group in Accordion to become expanded. Here is how to do this:

• jQuery
• HTML5
• CSS3

You can add your own custom conditions in your code, and lock or unlock a specific group. There is available demonstration on how to lock a specific group here: Add Custom Buttons in Group Header.

How to Display Custom Message on Right Click

When group header is clicked using the right mouse button, the grouprightclick event is fired. This event by default has no operation attached, but you can create a handler function in your code and add your own custom action there. For example you can add a code which displays a popup message or a different context menu depending on which group is clicked. Here is an example:

• jQuery

NOTE   In above examples you may notice that at first we are removing any handlers to the event that we are going to handle. This is a good practice to avoid creation of multiple handlers for the same event.

How to Handle Clicks on Close Button in Group Header

Accordion widget supports plenty of built-in events which you can handle in your code. But you can also customize the appearance of groups and create custom operations using the default jQuery events.

For example, by default group header only contains an icon, title and expand box. We can extend this by adding custom buttons to the group header and add handlers to the click event whenever these custom buttons are clicked. More information on this topic is available in jQuery Accordion Header with Custom Buttons article with live demonstration and complete source code.