CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-accordion
user1625066
user1625066

Reputation:

Accordion change color of single element

I have a jQuery accordion with the following markup

<div id="accordion">
    <div class="group" id="1">
        <div class="title">
            <a href="">Title 1</a></div>
        <div class="body">
            Body 1<br />
            <br />
            <form>
                Test <input type="text" /><br />
                <br />
                Test <input type="text" /><br />
                <br />
            </form>
        </div>
    </div>
    <div class="group" id="2">
        <div class="title">
            <a href="">Title 2</a></div>
        <div class="body">
            Body 2<br />
            <br />
            <form>
                Test <input type="text" /><br />
                <br />
                Test <input type="text" /><br />
                <br />
            </form>
        </div>
    </div>
</div>

I have included a jsfiddle here

http://jsfiddle.net/nLHpR/

How can I use javascript to change the background color of one of the accordion elements? For example, if I wanted to change the background color of accordion element with id = "1" to red, how would I do it?

I tried doing

$("#1").css('background-color','red');

and it did not work. I then tried

$("#1").children().css('background-color','red');

and it partially works but there are many areas which remain white (see jsfiddle link)

Upvotes: 1

Views: 3474

Answers (3)

Sushanth --
Sushanth --

Reputation: 55740

You need to override a class in the Jquery UI CSS to do so, 

#1 .ui-widget-content
{
    background: red !important;
}​

Because the background attribute given by the CSS has a image which seems to be overlapping it. So you need to give the backgroundcolor to this class and not the div directly..

$("#1 .ui-widget-content").css('background','red');

EDIT

.ui-accordion-icons .ui-accordion-header a {
    background: orange !important;
}​

CHECK FIDDLE

Upvotes: 1

manuerumx
manuerumx

Reputation: 1250

The problem is the class ui-widget-content from the accordion widget. This class has 

.ui-widget-content {
    border: 1px solid rgb(170, 170, 170);
    background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% rgb(255, 255, 255);
    color: rgb(34, 34, 34);
}

This is the solution override the class and put the other properties of the class except the background

$("#1").children(".body").removeClass("ui-widget-content");
$("#1").children("form").css('color','rgb(34, 34, 34)');
$("#1").children(".body").css('border', '1px solid rgb(170, 170, 170)' );

Upvotes: 0

Reflective
Reflective

Reputation: 3917

$("#1").css('background','red'); - background is defined in .ui-widget-content ... so you should override the whole background, otherwise background-image will presist

Upvotes: 1

Related Questions