How to change content background colour for Jquery Accordion

Question

How to change content background colour for Jquery Accordion? I've tried to change it in CSS and JS file:

[CSS]

.ui-accordion-content {  
    width: 100%;  
    background-color: #f3f3f3;  
    color: #777;  
    font-size: 10pt;  
    line-height: 16pt;  
}

[JS]

$(".ui-accordion-content").css("background", "#fcfff4")

none of them works.

You have to use a more specific CSS selector. Read the standard on what takes precedence for browsers choosing which CSS selectors for an element. So something like #myAccordion .ui-accordion-content might do it. Or you might have to be more specific. — Precastic, Jun 19 '13 at 03:01

score 3 · Accepted Answer · edited May 23 '17 at 11:51

To answer: You need to be aware of CSS selector precedence.

You have to use a more specific CSS selector. Read the standard on what takes precedence for browsers choosing which CSS selectors for an element. So something like

#myAccordion .ui-accordion-content

might do it. Or you might have to be more specific.

Here are a few links to more information about this:

score 2 · Answer 2 · answered Jun 19 '13 at 03:08

2

override .ui-widget-content

.ui-widget-content{
    background:red;
}

Look at this demo , I forked an accordion and just changed the background

answered Jun 19 '13 at 03:08

isJustMe

5,452
2
31
47

score 2 · Answer 3 · answered Feb 02 '15 at 20:05

I try and use more specific selectors and always add the background:none;

#accordion .ui-accordion-header{
  background-image:none;
  background-color:#333;
  color:#fff;
}

#accordion .ui-accordion-content{
  font-size:14px;
  background-image:none;
  background-color:#222;
  color:#fff
}

score 0 · Answer 4 · answered Jun 19 '13 at 03:04

0

you need to use the world !important in your CSS because you are overriding the default CSS settings of JQuery-UI, or maybe you should set/customize the Theme of your desired JQuery-UI theme before downloading the JQuery-UI

answered Jun 19 '13 at 03:04

Þaw

2,047
4
22
39

Can you use !important when setting it through jQuery.css()? – Precastic Jun 19 '13 at 03:05
@Precastic see here http://stackoverflow.com/questions/2655925/jquery-css-applying-important-styles – Þaw Jun 19 '13 at 03:07
@Þaw Yes, but that is not function of jQuery :) – Precastic Jun 19 '13 at 03:17

score 0 · Answer 5 · answered Aug 05 '16 at 17:07

Try with this

<style>
#accordion .ui-state-active{
background-image:none;
background-color:#FF0000!important;
color:#454545!important;
border: 1px solid #454545!important;
}

#accordion .ui-state-default{
background-image:none;
background-color:#F6F6F6;
color:#454545;
}
</style>

Regards.

score 0 · Answer 6 · answered Sep 07 '22 at 09:44

Might be late to the party, but I would go like this:

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0 0;
  padding: .5em .5em .5em .7em;
  font-size: 100%;
  background-color: WRITE HERE WHATEVER COLOUR YOU WISH ;
}

How to change content background colour for Jquery Accordion

6 Answers6