How to set jQuery header color for accordion via script and CSS

Question

I have a 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 headings will have the same color except the active heading or the extended heading, which will be the only ones showing only a different color. Then, when I click on another heading again, this extended heading will have a different color, and all collapsed headings will be styled in the same color. How to set color through jQuery and CSS? Please help. Thanks.

Answer 1

If you are using jquery ui accordion, maybe this will help:

To color any headline:

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

To color the active title:

 .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, for installation on the gray and orange active element:

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

Answer 4

remember to set the background image or set it equal to no one to just use the color.

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

if you want some of the headings to be colored 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 style only to this class

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

Answer 5

Inside jquery-ui-1.9.2.custom.min.css find this section and make changes:

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