CODEWITHSUNDEEP
jqueryuser-interfacecolorsiconsaccordion
d4riog
d4riog

Reputation: 15

Edit Jquery UI Accordion icon color

I was just wondering whether I could edit the color of the default icon of this accordion, keeping it black, even when it is expanded. I was just looking for a practical solution that does not require rebuilding a new accordion or uploading a custom icon.

my code here: https://jsfiddle.net/d4riog7/5ucxwa00/

not sure it can be achieved within the function:

 $( "#accordion" ).accordion({
      [...]
    });

or even via CSS

#accordion .ui-icon{
   [...]
}

cheers

Upvotes: 1

Views: 2856

Answers (3)

Dhanushka Rukshan
Dhanushka Rukshan

Reputation: 657

You can use the down arrow like using the below code.

.ui-state-active .ui-icon {
    background-image: url("https://download.jqueryui.com/themeroller/images/ui-icons_444444_256x240.png");
}

Upvotes: 0

David Espino
David Espino

Reputation: 2187

It is not perfect, but see what happen when you add this style rule to your fiddle:

.ui-icon:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,255,255, 0.5);
  transition: all .3s linear;
}

Unfortunately, the icon it's a span with background, so no much room to change the image but with previous answer. My solutions gives a tint to the entire span.

Upvotes: 0

4b0
4b0

Reputation: 22323

Working Fiddle

Use background image.

.ui-icon
{
    background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_black_256x240.png) !important;
}

You can download the icon png file in any color you like. Just change the color part in the following url:

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png

Or download and save locally and use locall URL.

Upvotes: 1

Related Questions