How to customize jquery UI accordion icons?
31,487
Solution 1
You would need to write some custom CSS to replace the jQuery UI icon that you plan to use. For example, in the case of the example code:
ui-icon-circle-arrow-e {background-image:url('path/to/my/images/filename.png') !important;}
Very similar to this SO question
Solution 2
Here's another option should you need the standard icons for another part of your project:
JS
$(function () {
var icons = {
header: "iconClosed", // custom icon class
activeHeader: "iconOpen" // custom icon class
};
$("#accordion").accordion({
icons: icons
});
});
CSS
.ui-icon.iconOpen {
background:url('YOUR Image HERE') no-repeat;
background-size:20px;
width:20px;
height:20px;
}
.ui-icon.iconClosed {
background:url('YOUR Image HERE') no-repeat -5px;
background-size:30px;
width:20px;
height:20px;
}
Author by
sneaky
Updated on July 17, 2022Comments
-
sneaky almost 2 years
I want to customize the icons for the accordion. I found the page here http://jqueryui.com/accordion/#custom-icons But it seems to give a name of something there for the header and activeHeader.
How do you do this, if you just have a path to an image file?