Hello so I am working on a new project that will also be open source and I am working on the admin panel. I am attempting to make a collapsible panel and then expandable again, as well as change the css styles.

This is my jQuery:

1. $(document).ready(function()
   {
     $(".cc").show();
     $(".ch_main").click(function()
     {
       $(this).next(".cc").slideToggle(0);
         $(this).addClass("ch_main2");
     }, function () {
         $(this).removeClass("ch_main");  
     });
   
   });
   
   
   
   
   
   
   
   
   
   
   

This is my HTML:

1.         <div class="ch_main">
               <div class="ch_left left"></div>
               <h3>HEADER</h3>
           </div>
           <div class="cc">
                dolor sit amet, consectetur adipiscing elit. In pulvinar elit at libero tempus molestie. Cras viverra luctus turpis eget vulputate. Sed auctor dictum orci, a sagittis quam fermentum id. Sed libero leo, luctus ac consectetur eu, volutpat a magna. Proin ullamcorper purus id enim ullamcorper at volutpat nisi suscipit. Phasellus tempus condimentum lacus at faucibus. Quisque vehicula suscipit iaculis. Mauris nec turpis facilisis lacus mollis pulvinar quis ac felis. Nulla convallis convallis justo at placerat. Curabitur id metus eros, non convallis augue. Suspendisse faucibus lorem in metus volutpat pretium. Donec adipisci
           </div>
   
   
   
   
   
   

This is how it looks expanded:


collapsed:


and then when i go to expand it again it looks like this:


So basically I am trying to figure out how to make the "ch_left" div change classes on the same click, and then change back when it expands again on click.

Any thoughts on how i can do this?

I am using jQuery 1.4.1. I have jQuery UI downloaded however my coding does not need it so i do not have it included in my file.

Thanks in advance,
Randy