CODEWITHSUNDEEP
jquery-ui
Jack
Jack

Reputation: 91

How to change jquery accordion header background colors?

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.

Upvotes: 9

Views: 26453

Answers (4)

Moez Ben Rebah
Moez Ben Rebah

Reputation: 312

$('HEADER').css('color', '#FF0000');

or

document.querySelector('HEADER').style.color = '#FF0000';

Upvotes: 0

neda Derakhshesh
neda Derakhshesh

Reputation: 1163

I did this and it helps:

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

First reset the main color then set the favorite color.

Upvotes: 2

Matt_Bro
Matt_Bro

Reputation: 14502

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.

Upvotes: 14

mmhan
mmhan

Reputation: 731

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

Upvotes: 2

Related Questions