How to customize jquery UI accordion icons?

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 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?

apaul · Answer 1 · 2014-06-18T16:24:40.637

34

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

edited Jun 18 '14 at 16:24

answered Jul 23 '13 at 18:41

apaul

16,092
8
47
82

why is the iconClosed background size 30px, and the first one only 20px? – sneaky Jul 23 '13 at 19:44
@sneaky it just looked better with the particular images used. – apaul Jul 23 '13 at 19:45
@sneaky the size and aspect ratio of the original images used in the example are different. – apaul Jul 23 '13 at 19:49
Worked for me. Thanks for the js fiddle example – Jamie Dec 22 '13 at 17:49
doesn't work for me. i can see in conole log the css is loading but not showing in browser. – shorif2000 Nov 27 '14 at 16:52
1

@bonez I'm not sure what you mean. Can you share a fiddle showing the problem? – apaul Nov 27 '14 at 17:23
It may be helpful to know that older versions of jQuery UI use `headerSelected` instead of `activeHeader`. – But those new buttons though.. Mar 28 '16 at 15:05

score 4 · Accepted Answer · edited May 23 '17 at 11:46

4

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

edited May 23 '17 at 11:46

Community

1
1

answered Jul 23 '13 at 17:22

DevlshOne

8,357
1
29
37

score -1 · Answer 3 · edited Mar 30 '15 at 10:40

-1

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

edited Mar 30 '15 at 10:40

Limon Monte

52,539
45
182
213

answered Mar 30 '15 at 10:03

abc

1

How to customize jquery UI accordion icons?

3 Answers3