jQuery Accordion Header with Custom Buttons

Created: 18 August 2014

Accordion is consisting of multiple groups which can expand horizontally or vertically. Each group has a header and a content panel, without any buttons in its header, except for the expand box. We can create a group with custom header containing multiple buttons, using custom HTML elements and CSS styles. In following sections we will demonstrate how to add multiple buttons to each group header with custom functionality.

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:

• HTML5
• CSS3

We can modify the appearance of the Accordion by changing its CSS styles; there is a different CSS class for each part. But if we want to further change the appearance of group header for example to add a toolbar with multiple custom buttons, we need to create those elements using HTML.

Related: Accordion with Headers in Different Colors

In our example group header will consist of a title shown to the left side and a set of buttons aligned to the right side. To create a button we will use the tag displayed as inline block. Each button consists of custom small image. Here how this looks like in code:

• jQuery
• CSS3

Note   The locked variable is not part of Accordion widget specification, it's created only for this example to handle clicks from Lock button in our toolbar, which can lock or unlock a group and prevent or allow a group to become selected.

Our code we will change the appearance of existing groups by showing a toolbar consisting of a Recycle, Lock and Delete buttons. Each of these buttons when clicked will perform a different action. A click to:

• Recycle button, will show a pop-up message stating that the button is clicked
• Lock button, will lock/unlock the group selection and expansion
• Delete button, will remove the group from the Accordion

We will create a function which will re-apply the click events for all buttons in each group, whenever the Accordion structure has changed.

At first we will retrieve the list of elements representing header of each group using a tag selector. Then by cycling through each group we can locate its attached toolbar using a class selector. Because buttons are child of group element, any click from a button will also bubble up and handled by internal code event handlers for groups in Accordion. As a result this will select the corresponding group, which we don't want. We want our toolbar to act as a separate component attached to each group header. To solve this we need to stop propagation of clicks upwards.

• jQuery

In order to bind the click event to our button elements, we will use a class selector. Based on button position in the toolbar, we can determine which button is clicked. In this way we can assign a different action for each button click. For example when Lock button is clicked a buttom image is also changed and the corresponding group becomes locked, that is unelectable.

By setting a value to the locked variable is not enough to prevent selection of groups. We also need to handle the beforeselect event, where depending on value of locked property we can determine whether a group will be selectable or not.

By default Accordion is empty with transparent background, and its appearance is only set by its contained groups. So if we remove all groups from the Accordion, an empty space will be shown. We need to make sure that when there are no groups, at least an framed block will appear. For this purpose we have handled the groupremoved event to track any changes to the group list, and when the list is empty we have changed the Accordion appearance by setting its background color and border.

• jQuery

All functionality explained in this article is demonstrated in above demo application. More information can be found in additional samples or Accordion widget online help pages.