Accordion is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
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.
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:
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.
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:
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.