CODEWITHSUNDEEP
jqueryjquery-uiiconsaccordionjquery-ui-accordion
sneaky
sneaky

Reputation: 2201

How to customize jquery UI accordion icons?

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?

Upvotes: 6

Views: 33140

Answers (3)

abc
abc

Reputation: 1

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

Upvotes: -1

apaul
apaul

Reputation: 16170

Here's another option should you need the 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;
}

Upvotes: 34

DevlshOne
DevlshOne

Reputation: 8457

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

Upvotes: 4

Related Questions