Change the default Icon on your jQuery UI Accordion
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.
To create jQuery Accordion, the code is quite simple and all I do is calling the accordion() function.
$(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
$(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 initialize the accordion plugin, and after I override the default icons with the ui-icon-circle-plus 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
.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 importance to our image so that the default jQuery UI theme icon images will have less importance and won't be used.
And the jQuery code is:
$(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:
<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:
Hope this was helpful.
Regards,
Hajan