Changing the appearance of a JQuery accordion's currently open panel's header

JavaScript
1

Hey guys,

This is my HTML code (edited/streamlined of course, but with the structure in tact) for a JQuery accordion:


<div class='accordion'>    
 
    <div class='text-long wo-padding'>
        <div class='text-short header wo-margin'>Background</div>
    </div>
    <div class='float-left'>
        <div class='text-short text-right'>Colour</div>
        <div class='text-medium wo-float'></div>
    </div>
    
    <div class='text-long wo-padding'>
        <div class='text-short header wo-margin'>Border</div>
    </div>
    <div class='float-left'>
        <div class='text-short text-right'>Colour</div>
        <div class='text-medium wo-float'></div>
    </div>
    
</div>

And now the JS:



$(document).ready(function () {

    $('.accordion').accordion({
        header: '.text-long',
        
        autoHeight: false
    });

});

Everything is working fine, but I’d like to change the appearance of my ‘text-short header’ div if it’s in the currently open panel. Currently, all divs have the same style/appearance regardless on whether or not they’re open.

I’m not sure if the ‘selectedClass’ option that was recommended in a book is now deprecated, or if I just wasn’t able to supply it the right class name or more likely create the correctly named CSS selector for it.

Any help is much appreciated!

Thanks,

Bardi