3

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.

1
  • 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. Commented Jun 19, 2013 at 3:01

6 Answers 6

3

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:

Sign up to request clarification or add additional context in comments.

Comments

2

override .ui-widget-content

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

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

Comments

2

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 } 

Comments

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

3 Comments

Can you use !important when setting it through jQuery.css()?
@Þaw Yes, but that is not function of jQuery :)
0

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.

Comments

0

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.