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: 19 September 2014
Using custom templates you can create different accordions with custom appearance and behavior. In our example we will show you how to change the behavior of Accordion widget in jQuery, so that each header contains a check box displayed in front of its title. Whenever this checkbox changes its value, a corresponding accordion group will become enabled or disabled.
You can create the layout of Accordion using only HTML5, but in this is case we will do it in code using jQuery.
At first we will create an instance of Accordion widget. To locate the DOM element that represents our accordion we will use a unique identifier.
At first we need to create the Accordion structure, we can do this either from HTML or through code using jQuery. Here is an example of an Accordion with three groups:
$(document).ready(function() {
// Create an instance of TabStrip widget
var $bar = $('#accordion').accordion();
});
<!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"></div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}
Accordion consists of one or more group object. Each group has its header and content panel, which are accessible using the headerContent and content variables. By adding a custom HTML generated content as value to these variables, we can modify the appearance of Accordion widget.
Related: Accordion with Headers in Different Colors
We will create a template by which all groups will be created. In our case only group header will contain HTML elements; the group content will contain a small paragraph containing only text.
Group header is represented by a <div> element, which contains a standard checkbox element placed before group title represented with a <span> element. Here is how this looks like in code:
// Create the group content
var generateGroup = function(index){
var group = {
headerContent: "<div class='group-header'>" +
"<input type='checkbox' />" +
"<span>Group " + index + "</span>" +
"</div>",
content: "<div class='group-content'>" + getGroupContent(index) + "</div>"
}
return group;
}
var getGroupContent = function(index){
var content = "";
switch (index){
case 2:
content = "Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum.";
break;
case 3:
content = "Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.";
break;
case 4:
content = "Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis.";
break;
default:
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.";
break;
}
return content;
}
.group-header
{
margin: 0;
padding: 0 2px;
}
.group-header span
{
vertical-align: middle;
}
.group-content
{
padding: 2px 5px 5px 5px;
}
input[type="checkbox"]
{
-webkit-transform: scale(1.4);
transform: scale(1.4);
margin: 3px 7px 3px 3px;
vertical-align: middle;
}
As it can be seen from code the headerContent variable holds a HTML generated content which will replace the default appearance of group header. To simplify our example, as content inside group content panel, we are using a small paragraph which contains only text, different for each group. You can also add other HTML elements arranged in custom layouts in each group content panel.
Next using our template, we will create and add several group objects to the Accordion. Whenever a new group is added, the Accordion widget automatically refreshes its layout. If there are many groups you want to add, you may need to suspend any changes to its layout and update it after the last group is added. This can be done using the suspendLayout and resumeLayout methods, like it is shown in our code:
// Suspend the Accordion layout to increase performance
$bar.accordion("suspendLayout");
// Add groups to the Accordion
for (var i = 1; i <= 4; i++)
$bar.accordion("addGroup", generateGroup(i));
// Resume and update the layout of Accordion
$bar.accordion("resumeLayout");
Now when we have set the appearance of our Accordion to include check boxes in each group header, we can start adding a behavior to it.
Whenever a checkbox changes its value, the change event is fired. We will create a handle for this event, so that any change to the check box is followed by a change in state of corresponding group to enabled or disabled. By default all groups are enabled, so their check boxes will also appear as unchecked.
At first we need to locate check box elements in the DOM. Because there are no other check boxes in our example, we will use the element selector. All found elements have the same index as group header elements, so we can use its value to quickly locate the corresponding group objects. A list that holds references to the group objects is available by calling the getCurrentList method.
// Get the list of all groups present in Accordion widget
var groupList = $bar.accordion("getCurrentList");
// Create a handle to the change event for all check boxes
$bar.find("input[type='checkbox']").each(function(index){
$checkBox = $(this);
// By default make sure all check boxes are checked
$checkBox.prop('checked', true);
$checkBox.on({
"change": function(e){
var currentValue = $(this).prop('checked');
// Enable or Disable a group based on value of its checkbox
if (index >= 0 && index < groupList.length){
var group = groupList[index];
if (group){
// Change the group state to enabled or disabled depending on check box value
group.enabled = currentValue;
// Get the DOM element that represents the group header
var groupHeaderElem = $bar.accordion("getGroupElement", group);
if (groupHeaderElem.length > 0){
// Change the appearance of group header, depending on group state
if (group.enabled)
groupHeaderElem.removeClass("group-header-disabled")
else
groupHeaderElem.addClass("group-header-disabled");
// Locate the DOM element that represents the group content panel, using the cid variable
// This variable holds the unique identifer of content panel that belongs to specified group
var groupContentElem = $bar.find("#" + group.cid);
if (groupContentElem.length > 0){
// Change the appearance of group content panel, depending on group state
if (group.enabled)
groupContentElem.removeClass("group-content-disabled")
else
groupContentElem.addClass("group-content-disabled");
}
// Apply the recent changes and update the layout of Accordion widget
$bar.accordion("updateLayout", group);
}
}
}
},
// Handle the mousedown event to prevent further propagation of this event
"mousedown": function(e){
e.stopPropagation();
}
});
});
.group-header-disabled
{
background: -webkit-linear-gradient(#BFBFBF, #6F7878);
background: -moz-linear-gradient(#BFBFBF, #6F7878);
background: -ms-linear-gradient(#BFBFBF, #6F7878);
background: -o-linear-gradient(#BFBFBF, #6F7878);
background: linear-gradient(#BFBFBF, #6F7878);
background-color: #555B5B;
border: solid thin #555B5B;
}
.group-content-disabled
{
background: -webkit-linear-gradient(white, #EEEEEE);
background: -moz-linear-gradient(white, #EEEEEE);
background: -ms-linear-gradient(white, #EEEEEE);
background: -o-linear-gradient(white, #EEEEEE);
background: linear-gradient(white, #EEEEEE);
background-color: #EEEEEE;
border: solid thin #555B5B;
}
As it is shown in above code, when a check box changes its value to checked or unchecked, the corresponding group becomes enabled or disabled. When this happens, we are adding a new CSS class to the group header and its content panel, which modifies their appearance. If group is disabled, it will appear in gray color, and when enabled again will return to its default look.
You may also notice that we are handling the mousedown event for check boxes. This is required to prevent this event to become handled by inside code of Accordion widget. Otherwise, whenever a checkbox is clicked, it will also select the group to which it belongs, which may trigger expand/collapse process followed by flickering. By handling this event, we make sure all function fluidly and without any unwanted behavior.
Related: Horizontal Expand in Accordion jQuery
The above demonstration shows an Accordion with groups where in each header there is a check box. Whenever this check box is clicked, the group will become enabled or disabled. Furthermore, if currently selected group becomes disabled, the selection is automatically moved to some previous enabled group. If there are no enabled groups, the selection remains the same but in disabled state.
When group is disabled, it cannot process any event like clicks or hovering, also its content panel will appear disabled. Because it is a <div> element, this is not truly a disabled content panel. There is no functionality in jQuery which can prevent events for all contained elements, like button clicks. A solution is to prevent this in your code, by manually handling the events for custom elements inside the group content panel.