Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Occurs after a group is removed from the Accordion.

Event Data

eObjectAn event object which contains the group


This event can be handled by binding the 'groupremoved' event to the Accordion widget object.

Version Information

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


"groupremoved": function(e){

console.log("groupremoved event was fired for group: " + e.object.text);



<!DOCTYPE html>



<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>



<button type="button" onclick="remove()" />Remove Group</button>

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












width: 300px;

height: 300px;



See Also