Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Occurs before a new group is added to the Accordion.

Event Data

eObjectAn event object which contains the group


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

Version Information

Supported in: v1.0.


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

By handling this event you can prevent adding of group depending on some custom conditions. By returning a false value, you can cancel this event. Whenever the 'Add Group' button is clicked a new group is added, until Accordion contains 3 groups. Afterwards, additional groups can't be added.

$(document).ready(function() {

// Create an instance of Accordion widget

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


// Get the number of present groups in Accordion

var getGroupCount = function(){

return $bar.accordion("getList").length + 1;



// Create a new group with its header title

var createNewGroup = function(){

return { text: "Group" + getGroupCount() };



// When 'Add Group' button is clicked, add a new group to the Accordion

var add = function(){

var group = $bar.accordion("addGroup", createNewGroup());



// Create a handler to the groupadding event and allow Accordion to contain only 3 groups


"groupadding": function(e){

var groupCount = getGroupCount() - 1;

if (groupCount > 3)

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="add()" />Add Group</button>

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





width: 300px;

height: 300px;



See Also