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.

Answer 1

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:

• Precedence in CSS selector specifity conflicts (type vs class selector)
• http://www.alternategateways.com/tutorials/css/css-101/part-four-the-css-order-of-precedence

Answer 2

override .ui-widget-content

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

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