JQuery overriding the themeroller style

Question

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!