1. <ul id="myAccordion">
               <li>
               <a href="#1" id="first">Accordion 1</a>
               <div>
                   Wow, look at all this content
                   that can be shown or hidden with a simple click!
               </div>        
               </li>
               <li>
               <a href="#2">Accordion 2</a>
               <div>
                   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean
                   sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula.
                   Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est
                   vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum
                   metus, ut bibendum velit enim eu lectus.Suspendisse potenti.
               </div>
               </li>
               <li>
               <a href="#3">Accordion 3</a>
               <div>
                   Donec at dolor ac metus pharetra aliquam. Suspendisse purus.
                   Fusce tempor ultrices libero. Sed quis nunc. Pellentesque tincidunt
                   viverra felis.Integer elit mauris, egestas ultricies,
                   gravida vitae, feugiat a, tellus.
               </div>    
               </li>
           </ul>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
2. $(document).ready(function(){
               var opts = {
                   alwaysOpen: false,
                   animated: "slide",
                   autoHeight: false
               };
                $('#myAccordion').accordion(opts);
              
               $('#first').accordion("disable").addClass("disabled");
                $('#enable').click(function(){
                   if($('#myAccordion').hasClass("enabled"))
                   {
                       alert("already enabled");
                   }
                   else
                   {
                       $('#myAccordion').accordion("enable").addClass("enabled")
                           .removeClass("disabled");
                          
                   }
               });
               $('#disable').click(function(){
                   if($('#myAccordion').hasClass("disabled"))
                   {
                       alert("already disabled");
                   }
                   else
                   {
                       $('#myAccordion').accordion("disable").addClass("disabled")
                           .removeClass("enabled");
                          
                   }
               });
           });
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

        this code is working but it is disabling the whole accordion rather than the first item...which is desired