How to set jQuery UI badges for accordion?

Question

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 the name something there for the header and activeHeader.

How do you do this if you have a path to the image file?

Answer 1

You will need to write some custom CSS to replace the jQuery UI icon you plan to use. For example, in the case of example code:

ui-icon-circle-arrow-e {background-image:url('path/to/my/images/filename.png') !important;} 

Very similar to this SO question

Answer 2

Here you will also need standard icons for another part of your project:

Working example

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; } 

Answer 3

 $("#accordion").accordion({ accordion: true, speed: 500, closedSign: '<img src="../../images/arrow-forward.png"/>', openedSign: '<img src="../../images/arrow-down.png"/>' });