LIDOR SYSTEMS

Advanced User Interface Controls and Components

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.

Group 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Group 2

Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc.

Group 3

Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo.

Group 4

Laoreet venenatis nisi dui, malesuada dis suspendisse vitae. Per potenti, interdum dignissim, quis adipiscing lectus neque imperdiet hac et. Tristique ut magna a fermentum vestibulum, nunc interdum urna, dapibus vestibulum nulla elit ante odio elit ...

Accordion is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

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:

$(document).ready(function() {

// Create an instance of Accordion widget

var $bar = $('#accordion').accordion();

 

$bar

.off("beforeexpand")

.on({

"beforeexpand": function(e){

// Get the index of expanding group

var index = $bar.accordion("getList").indexOf(e.object);

// If index matches the second group, cancel the event

if (index === 1)

return false;

}

});

});

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.accordion.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.accordion.min.js"></script>

</head>

<body>

<div id="accordion" class="widget">

<h3><span>Group 1</span></h3>

<div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p></div>

<h3><span>Group 2</span></h3>

<div><p>Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc.</p></div>

<h3><span>Group 3</span></h3>

<div><p>Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst.</p></div>

<h3><span>Group 3</span></h3>

<div><p>Laoreet venenatis nisi dui, malesuada dis suspendisse vitae. Per potenti, interdum dignissim, quis adipiscing lectus neque imperdiet hac et. Tristique ut magna a fermentum vestibulum, nunc interdum urna, dapibus vestibulum nulla elit ante odio elit ...</p></div>

</div>

</body>

</html>

.widget

{

background: transparent;

width: 300px;

height: 300px;

}

.widget > div > p

{

margin: 0;

overflow: hidden;

padding: 5px;

text-overflow: ellipsis;

}

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:

$bar

.off("grouprightclick")

.on({

"grouprightclick": function(e){

// Whenever a group header is clicked using the right mouse button, show a pop-up message

alert("grouprightclick event was fired when " + e.object.text + " was clicked using the right mouse button.");

}

});

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.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.