How to change jquery accordion header background colors?

Question

Experts,

how to change the accordion menu header colors ? which style class name is this ? and how to set default selected tab ?

Please see the URL: http://jqueryui.com/demos/accordion/

Here i need to select section 2 when i am opening menu...

Please help me out to get changes.

Answer 1

In order to change the background color of the header, in the css, identify the accordion header class name and then change the background property like so:

.ui-accordion-header{
   background:black;
}

In order to set the active index to 2, use the api: http://docs.jquery.com/UI/API/1.8/Accordion

Here you will find that you just have to call .accordion( "activate" , index ) on your jquery accordion object.

Answer 2

A quick inspection tells me that you have to modify the css declaration of

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited

and

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited

As for the default selected tab you could do something like below:

$('#myAccordionId').accordion({}).accordion("activate" , indexOrSelector) //index in your case would be 1

Answer 3

I did this and it helps:

#accordion h3{ 
  background:none;
  background-color:yellow;         
}

First reset the main color then set the favorite color.