How to Place a Check Box in Header of jQuery Accordion

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.

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.

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:

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.

// 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.

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.

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.