Advanced User Interface Controls and Components
Occurs when group header is clicked in Accordion.
| Param | Type | Details |
|---|---|---|
| e | Object | An event object which contains the group and mousePos objects |
This event can be handled by binding the 'groupclick' event to the Accordion widget object.
The mousePos object associated with this event holds coordinates of mouse position relative to the parent page.
Supported in: v1.0.
In this example we are showing how to handle the groupclick event in Accordion widget. Whenever a group header is clicked, a pop-up message will appear stating which group is clicked.
$(document).ready(function() {
// Create an instance of Accordion widget
var $bar = $('#accordion').accordion();
// Create a handler to the groupclick event
$bar.on({
"groupclick": function(e){
alert("groupclick event was fired when header of " + e.object.text + " is clicked");
});
});
<!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>Group1</span></h3>
<div></div>
<h3><span>Group2</span></h3>
<div></div>
<h3><span>Group3</span></h3>
<div></div>
</div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}
A sample which demonstrates how to handle different events in Accordion widget.