Microsoft MVP in ASP.NET/IIS, Senior Software Engineer, Microsoft Certified, MCC (Microsoft Community Contributor), Technology Enthusiast, Speaker, Blogger, Technical Books Reviewer, having several years of experience working in Software Development and Engineering with primary focus on Microsoft technologies. Passionate about contributing to Microsoft Community especially concerning Web Development. Interested in scientific research, BSc., MSc. (candidate) in Computer Sciences, Intelligent Systems. Hajan is a DZone MVB and is not an employee of DZone and has posted 40 posts at DZone. View Full User Profile

Change the default Icon on your jQuery UI Accordion

02.15.2011
| 26790 views |
  • submit to reddit

I've got this question in one of my previous blogs posted here (the same blog is posted on codeasp.net too), dealing with jQuery UI Accordion and I thought it's nice to recap this in a blog post so that I will have it documented for further reference.

In the previous blog, I'm creating tabs content navigation using jQuery UI Accordion. So, it's quite simple code and all I do there is calling accordion() function.

<script language="javascript" type="text/javascript">
$(function() {
$("#products").accordion();
});
</script>

The default image icons for each item is the arrow. The accordion uses the right arrow and down arrow images. So, what we should do in order to change them?

JQuery UI Accordion contains option with name icons that has header and headerSelected properties. We can override them with either the existing classes from jQuery UI themes or with our own.

1. Using existing jQuery UI Theme classes

- Open the follownig link: http://jqueryui.com/themeroller/#icons

You will see the icons available in the jQuery UI theme. Mouse over on each icon and you will see the class name for each icon. As you can see, each icon has class name constructed in the following way: ui-icon-<name>

All icons in one image

- In our example, I will use ui-icon-circle-plus  and ui-icon-circle-minus (plus and minus icons).

- Lets set the icons

<script language="javascript" type="text/javascript">
$(function() {
//initialize accordion
$("#products").accordion();
//set accordion header options
$("#products").accordion("option", "icons",
{ 'header': 'ui-icon-circle-plus', 'headerSelected': 'ui-icon-circle-minus' });
});
</script>

From the code above, you can see that I first intialize the accordion plugin, and after I override the default icons with the ui-icon-circle-plyus for header and ui-icon-circle-minus for headerSelected.

Here is the end result:

So, now you see we have the plus/minus circle icons for the default header state and the selected header state.

 

2. Add my own icons

- If you want to add your own icons, you can do that by creating your own custom css classes.

- Lets create classes for both, the header default state and header selected state

<style type="text/css">
.defaultIcon
{
background-image: url(images/icons/defaultIcon.png) !important;
width: 25px;
height: 25px;
}
.selectedIcon
{
background-image: url(images/icons/selectedIcon.png) !important;
width: 25px;
height: 25px;
}
</style>

As you can see, I use my own images placed in images/icons/ folder

- default icon
- selected icon

One very important thing to note here is the !important key added on each background-image property. It's like that in order to give highest importancy to our image so that the default jQuery UI theme icon images will have less importancy and won't be used.

And the jQuery code is:

<script language="javascript" type="text/javascript">
$(function() {
//initialize accordion
$("#products").accordion();
//set accordion header options
$("#products").accordion("option", "icons",
{ 'header': 'defaultIcon', 'headerSelected': 'selectedIcon' });
});
</script>

Note: For both #1 and #2 cases, we use the class names without adding . (dot) at the beginning of the name (as we do with selectors). That's because the the header and headerSelected properties accept classes only as a value, so the rest is done by the plugin itself.

The complete code with my own custom images is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery Accordion</title>
<link type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/blitzer/jquery-ui.css"
rel="Stylesheet" />
<style type="text/css">
.defaultIcon
{
background-image: url(images/icons/defaultIcon.png) !important;
width: 25px;
height: 25px;
}
.selectedIcon
{
background-image: url(images/icons/selectedIcon.png) !important;
width: 25px;
height: 25px;
}
</style>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
//initialize accordion
$("#products").accordion();
//set accordion header options
$("#products").accordion("option", "icons",
{ 'header': 'defaultIcon', 'headerSelected': 'selectedIcon' });
});
</script>

</head>
<body>
<form id="form1" runat="server">
<div id="products" style="width: 500px;">
<h3>
<a href="#">
Product 1</a></h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in tortor metus,
a aliquam dui. Mauris euismod lorem eget nulla semper semper. Vestibulum pretium
rhoncus cursus. Vestibulum rhoncus, magna sit amet fermentum fringilla, nunc nisl
pellentesque libero, nec commodo libero ipsum a tellus. Maecenas sed varius est.
Sed vel risus at nisi imperdiet sollicitudin eget ac orci. Duis ac tristique sem.
</p>
</div>
<h3>
<a href="#">
Product 2</a></h3>
<div>
<p>
Aliquam pretium scelerisque nisl in malesuada. Proin dictum elementum rutrum. Etiam
eleifend massa id dui porta tincidunt. Integer sodales nisi nec ligula lacinia tincidunt
vel in purus. Mauris ultrices velit quis massa dignissim rhoncus. Proin posuere
convallis euismod. Vestibulum convallis sagittis arcu id faucibus.
</p>
</div>
<h3>
<a href="#">
Product 3</a></h3>
<div>
<p>
Quisque quis magna id nibh laoreet condimentum a sed nisl. In hac habitasse platea
dictumst. Proin sem eros, dignissim sed consequat sit amet, interdum id ante. Ut
id nisi in ante fermentum accumsan vitae ut est. Morbi tellus enim, convallis ac
rutrum a, condimentum ut turpis. Proin sit amet pretium felis.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</form>
</body>
</html>

The end result is:

References
Published at DZone with permission of Hajan Selmani, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)