Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Occurs after 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 'groupadded' event to the Accordion widget object.

Version Information

Supported in: v1.0.


An example explaining how to create a handle to the groupadded event in Accordion widget. Whenever the 'Add Group' button is clicked a new group is added, after which console log will display a message stating that groupadded event is fired.

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


"groupadded": function(e){

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

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





width: 300px;

height: 300px;



See Also