LIDOR SYSTEMS

Advanced User Interface Controls and Components

How to Add or Remove Groups in Accordion for jQuery

Created: 08 August 2014

There are two ways to add new groups into the Accordion widget: by using HTML or by using jQuery. In following sections we will explain how to create new groups dynamically and add them to the Accordion. In the same manner we will also show you how to delete a group during run-time. We will use several built-in methods accompanied with corresponding events which are specifically designed to make this process easier and using less code than necessary.

Accordion is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps





How to Add New Groups to the Accordion

In order to add a new group using HTML, we need to use one of following header tags: <h3>, <h4>, <h5> or <h6> for group header and also a <div> tag for group body. Here is an example:

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

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

<h3><span>Group 1</span></h3>

<div></div>

<h3><span>Group 2</span></h3>

<div></div>

</div>

</body>

</html>

<style type="text/css">

.widget

{

width: 300px;

height: 300px;

}

</style>

Using HTML to create the structure of an accordion is best suited for simple accordions, when we don’t need further actions, like dynamically adding or removing of existing groups. For this purpose is better to use jQuery with built-in methods like is shown in following sections.

When using jQuery, at first we need to create an instance of Accordion widget. Then we need to create a group object stating its header title and content. Finally, we will call the addGroup method to add the group to the accordion. Here how this looks like:

// Create an instance of Accordion widget

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

var groupCount = 0;

 

// Create a new group

var generateGroup = function(title){

var group = {

text: title,

content: "<p class='group-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>"

}

 

return group;

}

 

$('#add-group').click(function(e){

groupCount++;

$bar.accordion("addGroup", generateGroup("Group" + groupCount));

});

.group-content

{

margin: 0;

padding: 5px;

}

In above code whenever a button (with identifier set to 'add-group') is clicked, a new group will be created and then added to the accordion widget.

Note   By default group header only uses its text as a title. However we can customize this by using the headerContent property of group object, which allows us to create a custom header with different elements arranged in custom layouts. To see an example of this, check out the Accordion Header with Custom Buttons article.

Using addGroup method is efficient but only adds groups at the end of the list. If we want to add a group at specific position, we should use one of the following methods:

  • insertGroupAfter – inserts a new group after a specified group
  • insertGroupAt – inserts a new group at specified position
  • insertGroupBefore – inserts a new group before a specified group

Here is an example where a new group in added at position 1 in the collection of groups and also using only group title. Whenever a button (with identifier set to ‘insert-at’) is clicked, a new group will be inserted at specified position:

$('#insert-at').click(function(e){

groupCount++;

$bar.accordion("insertGroupAt", { text: "Group" + groupCount }, 1);

});

The process of adding groups to the accordion widget is accompanied with groupadding and groupadded events. You can handle these events and add your own code performing some custom action, like preventing some group to be inserted if some conditions are not fulfilled.

How to Remove Existing Groups from Accordion

Now that we have some groups present in our accordion, the question remains how to remove them dynamically? There are several built-in methods which can help you in this process, they are:

  • removeGroup – deletes a specified group from the collection
  • removeGroupAt – deletes a group at specified position in the collection
  • clearGroups – deletes all groups from the collection

In following example it is shown how to remove the currently selected group. Whenever a button (with identifier set to 'remove') is clicked the group that is current selected will be deleted and the accordion will update its layout. The code looks like this:

$('#remove').click(function(e){

$bar.accordion("removeGroup", $bar.accordion("option", "selectedGroup"));

});

You will notice that we are using the selectedGroup property which holds a reference to the currently selected group.

Like in adding operations, the process of removing groups is accompanied with groupremoving and groupremoved events. You can handle these events and add your own code performing some custom action, like preventing some group to be removed if some conditions are not fulfilled. You can learn more about this in Events in Accordion Widget.

Note   Although in above example is shown removal of groups by clicking on a button, we can create a different way to accomplish this, which better suites your web application. For example, we can add a close button to the group header and whenever it’s clicked the group will be removed.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.