Changing the appearance of my accordion's currently open panel's header

Changing the appearance of my accordion's currently open panel's header

Hey guys,

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

  1.             <div class='accordion'>
                
                    <div class='text-long wo-padding'>

  2.                         <div class='text-short header wo-margin'>Background</div>
  3.                 </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'>





  4.                         <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>


  5.                         </div>
  6.                 </div>
                  
                </div>

And now the JS:

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




  2.             });

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