Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Occurs before a group is removed from the Accordion.

Event Data

eObjectAn event object which contains the group


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

Version Information

Supported in: v1.0.


An example explaining how to create a handle to the groupremoving event in Accordion widget.

By handling this event you can prevent removing of groups depending on some custom conditions. By returning a false value, you can cancel this event. Whenever the 'Remove Group' button is clicked the currently selected group will be removed from the Accordion, until only one groups remains.

$(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 groupremoving event


"groupremoving": function(e){

var groupCount = $bar.accordion("getList").length;

if (groupCount <= 1)

return false;



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