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