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