CODEWITHSUNDEEP
jquery
IceDawg
IceDawg

Reputation: 327

How to change content background colour for Jquery Accordion

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.

Upvotes: 3

Views: 11031

Answers (6)

Sanyifejű
Sanyifejű

Reputation: 2740

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

Upvotes: 0

NetRevolutions
NetRevolutions

Reputation: 96

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.

Upvotes: 0

csmith81487
csmith81487

Reputation: 21

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
}

Upvotes: 2

Precastic
Precastic

Reputation: 4021

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:

Upvotes: 3

isJustMe
isJustMe

Reputation: 5470

override .ui-widget-content

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

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

Upvotes: 2

&#222;aw
&#222;aw

Reputation: 2057

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

Upvotes: 0

Related Questions