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.

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

Answer 2

header background color

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

active header background color

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

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") ;