Posted 14 years ago 451686 reads

Hey Guys!!! Doing good?

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="http://www.giftlelo.com/29-embroidered-devil-eyes-4819.html"><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="http://www.giftlelo.com/28-spring-embroidery-4797.html"><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="http://www.giftlelo.com/26-charming-fairy-4737.html"><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="http://www.giftlelo.com/25-geometrical-embroidery.html"><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="http://www.giftlelo.com/20-elephant-with-luck.html"><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="http://www.giftlelo.com/19-lady-in-red.html"><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="http://www.giftlelo.com/17-fireworks-embroidery-art.html"><img src="images/fireworks-embroidery.jpg" alt="Fireworks Embroidery Art" width="486" height="198" border="0" /></a></div>
  </div>
</div>

What is required?

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)
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>

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});

Click here to see all examples in one file!

Download!

https://github.com/marghoobsuleman/jquery-accordion

>_jQuery Common Accordion - Horizontal & Vertical