How to set jQuery accordion header color through script & CSS

Question

I have simple accordion. Here is my HTML code.

 <div id="accordion">
            <div>
                    <h3 id="a1"><a href="#">First</a></h3>
                    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
            </div>
            <div>
                    <h3 id="a2"><a href="#">Second</a></h3>
                    <div>Phasellus mattis tincidunt nibh.</div>
            </div>
            <div>
                    <h3 id="a3"><a href="#">Third</a></h3>
                    <div>Nam dui erat, auctor a, dignissim quis.</div>
            </div>
    </div>

My question is, when my accordion shows, then all collapsed headers will have the same color, except the active header or the expanded header, which will be the only ones showing a only different color. Then, when I click again on another header, that expanded header will have different color and all collapsed headers will be styled with that same color. How can I set the color through jQuery & CSS? Please help. Thanks.

Infantine

could you put up a jsfiddle please and comment when you have? – Coreen

Answer 1

If you're using jquery ui accordion, perhaps this will help:

For coloring any header:

.ui-accordion-header { background-color: blue; }

For coloring the active header:

.ui-accordion-header.ui-state-active { background-color: yellow; }

Variolite

For me, it blinks blue for a millisecond and then it returns to normal unmodified theme. – Nelrsa

Answer 2

header background color

#accordion .ui-accordion-header { background: #fff; }

active header background color

#accordion .ui-accordion-header.ui-state-active { background: #0c8d11; }

Ceramic

Answer 3

Thus, to set to grey and to orange the active element :

$(".ui-accordion-header").css("background","grey") ;

$(".ui-accordion-header.ui-state-active ").css("background","orange") ;

Brigitta

Needed this for when I change the activated accordion pane within a timer. – Fervor

Answer 4

remember to set background-image too, or set it to none to just use the colour.

   .ui-state-default{
      background-color: #3173a5;
      background-image: none;
   }

if you only want some of the headers to be coloured differently you can add a class to them

<h3>Regular Header</h3>
<div>Regular Content</div>

<h3 class="special">Special Header</h3>
<div>Special Content</div>

then attach the style to only that class

   .special.ui-state-default{
      background-color: #3173a5;
      background-image: none;
   }

Kilk

Answer 5

Inside jquery-ui-1.9.2.custom.min.css locate this section and make the change:

 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 0px solid #d3d3d3;
    background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
    font-weight: normal;
    color: #555;
}

Dore