JQuery overriding the themeroller style

Question

Hi,

In my accordian control I want to override the header style to show a red background instead of the default theme colour if ever the user control (e.g user's name and address input) in that particular pane returns a validation boolean of false.

I'm ok with how to use .Toggle to change the class but can't figure out how to grab the themeroller class in the first place.

How would I do this?

Thanks

Paul

Answer 1

Assuming you are Using the jQuery Accordion

the class is called: .ui-accordion-header

so after the validation return false

set the new background color by adding inline style like this:

$('.ui-accordion-header').attr('style','background:red');

then for remove it:

$('.ui-accordion-header').attr('style','');

UPDATE

Assuming you have this html struct

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        ... <- if your form is here for es.: 
                   your path escalation to it's own H3 would be:

<!--\ $(this).parent('p').parent('div').prev(h3).attr('style','background:red') \-->

        </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
     ...
        </p>
    </div>
</div>

Where $(this) refer to the empty Input in the if statment!

if ( $('my_input').val() == '' )
$(this).parent().parent().prev().attr('style','background:red');

this should work as expected!

Answer 2

A useful way of reverse-engineering something like this is to go into a browser like Firefox or Chrome (others do this as well, but these are the two I use most), right-click on the element, and select "Inspect Element." This will give you a nicely-formatted (at least Firefox formats it, I think Chrome might not) view of the markup, as well as currently applied styles. In addition, that inspector can help you figure out, for example, why your CSS rules aren't applying. You can also create new rules on the fly, which makes the edit-compile-test loop much faster.