Horizontal & Vertical Common Accordion with jQuery

DOWNLOAD
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. 

  2. You'll need to add following code in head tag.
    3. 



<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










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











Horizontal Accordion - Automatic Slide










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











Nested Accordion










1$("#accordionNested").msAccordion({defaultid:2});










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











Vertical Accordion










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










 


Labels: