Advanced User Interface Controls and Components
Occurs after a group is removed from the Accordion.
| Param | Type | Details |
|---|---|---|
| e | Object | An event object which contains the group |
This event can be handled by binding the 'groupremoved' event to the Accordion widget object.
Supported in: v1.0.
An example explaining how to create a handle to the groupremoved event in Accordion widget. Whenever the 'Remove Group' button is clicked the currently selected group will be removed from the Accordion, after which console log will display a message stating that groupremoved event is fired.
$(document).ready(function() {
// Create an instance of Accordion widget
var $bar = $('#accordion').accordion();
// Get the group that is currently selected in Accordion
var getCurrentSelection = function(){
return $bar.accordion("option", "selectedGroup");
}
// When 'Remove Group' button is clicked, it removes the currently selected group from the Accordion
var remove = function(){
$bar.accordion("removeGroup", getCurrentSelection());
}
// Create a handler to the groupremoved event
$bar.on({
"groupremoved": function(e){
console.log("groupremoved event was fired for group: " + e.object.text);
});
});
<!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>
<button type="button" onclick="remove()" />Remove Group</button>
<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 you can add/remove groups in Accordion widget using several different methods.