CODEWITHSUNDEEP
jquerycss
crazybob
crazybob

Reputation: 2317

How to change text color of a link inside jQuery accordion

I would like to change a color of a link inside jQuery accordion. How can I do it?

css

.x
{
    color: red;
}

html

<div id="test">
    <h3><a href="#">One</a></h3>
    <div>111
    </div>
    <h3><a href="#">Two</a></h3>
    <div>222
    </div>
    <h3><a href="some_link" class="x">Three</a></h3>
    <div> bla</div>
</div>

Here is an example: Fiddle

Upvotes: 0

Views: 2948

Answers (4)

Nitesh
Nitesh

Reputation: 15739

Add this code to your CSS at the bottom.

.ui-accordion .ui-accordion-content-active {
        color:red;
}

This will make the black color to red.

Also, declare your css after jquery-ui.css

WORKING DEMO

EDIT

If you need to apply the style to the heeader, you need to create a css for h3.ui-accordion-header a.x as below.

The Code change

h3.ui-accordion-header a.x {
    color: #FF0000;
}

WORKING DEMO

Hope this helps.

Upvotes: 4

Rory McCrossan
Rory McCrossan

Reputation: 337560

While adding !important would work, you should only use it as a last resort, as it can lead to a lot of maintenance problems should you ever need to then override a style with !important already set on it.

Instead, use selector precedence to increase the weight of your selector:

#test .x {
    color: red;
}

Example fiddle

Upvotes: 1

Rituraj ratan
Rituraj ratan

Reputation: 10378

see demo

.ui-accordion-header a
{
    color: red ;
}

Upvotes: 0

Given
Given

Reputation: 166

Alternatively 

.x
{
  color: red !important;
}

Hope this helps

Upvotes: 3

Related Questions