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.

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:

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:

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:

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.

Tab content switching

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.