Here I come with a new jQuery Accordion component. I know lots of accordions are available on the net. But I could not find the one, I was looking for.
Well... Whatz the difference then? What was I looking for? Not too much of glorification...
Hence, I ended up making one. It’s pretty easy piece of work and also easy to use. I suggest why you all don’t have a look at the following features I imbibed in my accordion. Explore now!

jQuery Accordion Features

• Works as vertical accordion and horizontal accordion.
• It can be auto slide.
• You can set a default panel.
• You can set your own mouse events.
• It can be nested.
• Its just 4kb without any compression.
• Its free! :)

How this jQuery Accordion works?

You'll need to keep your html code as follows. Just treat your code as an xml file.

Sample Code

<div id="accordionGiftLelo">
  <div class="set">
    <div class="title"><img src="images/DEVIL_EYES_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/devilEyes.jpg" alt="Embroidered Devil Eyes" width="486" height="198" border="0" /></a></div>
  </div>
  <div class="set">
    <div class="title"><img src="images/SPRING_EMBROIDERY_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/spring-emroidery.jpg" alt="Spring Embroidery" width="486" height="198" border="0" /></a></div>
  </div>
  <div class="set">
    <div class="title"><img src="images/CHARMING_FAIRY_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/charmingFairy.jpg" alt="" width="486" height="198" border="0" /></a> </div>
  </div>
  <div class="set">
    <div class="title"><img src="images/GEOMETRICAL_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/geomatical_embrodery.jpg" alt="Geometrical Embroidery" width="486" height="198" border="0" /></a><br />
    </div>
  </div>
  <div class="set">
    <div class="title"><img src="images/ELEPHANT_LUCK_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/elephant-luck.jpg" alt="Elephant with Luck" width="486" height="198" border="0" /></a></div>
  </div>
  <div class="set">
    <div class="title"><img src="images/LADY_RED_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/lady-in-red.jpg" alt="Lady in Red" width="486" height="198" border="0" /></a></div>
  </div>
  <div class="set">
    <div class="title"><img src="images/FIREWORKS_ART_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/fireworks-embroidery.jpg" alt="Fireworks Embroidery Art" width="486" height="198" border="0" /></a></div>
  </div>
</div>

What is required?

1. Your html code should be as above. Make a set like I did in above sample html code. You must have respective classes ie set, title & content.
   (You can use your own favorite html tags ie. ul, li, span etc but follow the classes rules)
2. You'll need to add following code in head tag.

   <link rel="stylesheet" type="text/css" href="css/accordion.css" />
   <script language="javascript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
   <script language="javascript" type="text/javascript" src="js/jquery.msAccordion.js"></script>
   

3. Last but not the least. Enable your accordion with the help of following code. Paste this code to anywhere in the body. "accordionGiftLelo" is your accordion holder.

   <script language="javascript" type="text/javascript">
   $(document).ready(function() {
   						   $("#accordionGiftLelo").msAccordion();
   						   }
   						   )
   </script>
   

jQuery Accordion Basic Code

//init
$("#youdivid").msAccordion();
//set a default panel
$("#youdivid").msAccordion({defaultid:2}); // no. starts from zero 
//change mouse event
$("#youdivid").msAccordion({event:'mouseover'}); //by default its on click
//make it auto slider
$("#youdivid").msAccordion({autodelay:1}); //value in seconds
//make it vertical
$("#youdivid").msAccordion({vertical:true});
//you can combine all options
$("#youdivid").msAccordion({defaultid:2, autodelay:3, vertical:true, event:"dblclick"});

jQuery Accordion Demo (Horizontal & Vertical)

Horizontal Accordion

$("#accordionGiftLelo").msAccordion();

Horizontal Accordion - Automatic Slide

$("#accordion1").msAccordion({defaultid:3, autodelay:4});

Nested Accordion

$("#accordionNested").msAccordion({defaultid:2});
$("#accordionNestedChild").msAccordion({defaultid:2, vertical:true});	

Vertical Accordion

$("#accordion3").msAccordion({vertical:true});

The article source:http://www.marghoobsuleman.com/jQuery-common-accordion