LIDOR SYSTEMS

Advanced User Interface Controls and Components

Accordion jQuery with Headers in Different Colors

Created: 07 April 2014

In most cases all headers of Accordion widget are using the same color scheme. In order to change their look we need to use a different CSS style for specified group. IntegralUI Accordion widget simplifies this process by allowing to set a custom color style on demand, for each group (header or content) in different states.

Accordion is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

Accordion widget is a collection of group objects. Each group objects contains a header and a content panel. The appearance of groups is determined by a default color scheme with different color styles for each group state: normal, hovered, selected, disabled etc.

We can use jQuery to search for a specific element and then add a CSS class to it to change its appearance. However, there is a better way, and that is to apply a custom CSS style to a group object which is related to the specific element. This will enable persistence of group appearance.

IntegralUI Accordion widget creates group objects which are directly related to the corresponding HTML elements. Whenever a change is made to a group object, the related HTML element is also changed. In following section we will show how this is done.

To change the appearance of specific group, at first we need to create a CSS style:

$(document).ready(function() {

// Create an instance of Accordion widget

var $bar = $('#accordion').accordion({

expandDirection: 'right'

});

});

<!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>

.group-header-red

{

background: -webkit-linear-gradient(#b90000, #ff6c6c);

background: -moz-linear-gradient(#b90000, #ff6c6c);

background: -ms-linear-gradient(#b90000, #ff6c6c);

background: -o-linear-gradient(#b90000, #ff6c6c);

background: linear-gradient(#b90000, #ff6c6c);

 

background-color: #b90000;

border: solid thin gray;

color: white;

}

Then we need to apply this style to the group by using its style property. For example:

$group = $bar.accordion("selectedGroup");

$group.style.header = {

normal: "group-header-red",

selected: "group-header-red"

}

 

$bar.accordion("refresh");

In code above at first we get a reference to the currently selected group in Accordion widget, and then we set the header style for normal and selected state to the name of previously created CSS style. Then we update the widget layout by calling the refresh method. In our case the group will have the same appearance whether it is selected or not. But you can use a different classes for each state.

This will alter the built-in color style and replace it with applied one. If some CSS attributes are not set in the new style, the default ones will be used. This allows you to extend the current color scheme.

This could also be done initially when a new group is added to the Accordion:

$bar.accordion("addGroup", {

text: "Art",

content: generateGroupContent(),

style: {

header: {

normal: "group-header-red",

selected: "group-header-red"

},

content: "group-content"

}

});

In both cases we are using the style property to set a different appearance for each group. In that way all groups can have their own custom look.

Here is a link to a demo which shows Headers in Different Colors in Accordion jQuery Widget.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.