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.
- 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.
<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>
<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)
› View Horizontal Accordion
$("#accordionGiftLelo").msAccordion();
› View Horizontal Accordion - Automatic Slide
$("#accordion1").msAccordion({defaultid:3, autodelay:4});
› View Nested Accordion
$("#accordionNested").msAccordion({defaultid:2});
$("#accordionNestedChild").msAccordion({defaultid:2, vertical:true});
› View Vertical Accordion
$("#accordion3").msAccordion({vertical:true});
Click here to see all examples in one file!
You want it? Download!
| Attachment | Size |
|---|---|
| accordion-common.zip | 537.04 KB |
Vertical Accordion Broken in IE8
Hi all. To echo what others have said, this is a great script and very slick. Thanks, Marghoob for taking the time to build and share it!
My use of the script works fine in Safari and FF but is totally broken in IE8. It shows a screwed up version of the three sections but no content shows and they're not clickable. Does anyone have any suggestions on what to do?
Thanks!
URL: http://www.utahhomeshq.com/new/utah-real-estate-team.html
Great Post
I like what you've here, it might just be me, but it seems a little buggy in Chrome for mac.
I'm tryng to resolve it.At
I'm tryng to resolve it.At this time do you Know if Is there a solution?
layout on Safari
I think there's a problem of layout on Safari,about horizontal menu.
Salaam Marghoob, I really
Salaam Marghoob,
I really love this accordion but I've run into a few strange problems.
1. On IE, my entire title is not clickable (no pointer either). Some are and on others, you have to click very close to the bottom.
2. On IE 6 & IE7 is find the titles on the right drag along with other titles when those are clicked. IE. Assuming I have 6 titles, clicking on title number 3 will cause title 4, 5 & 6 to drag along for the transition effect and then appear in place again very quickly. The first I had this problem was on IE8 but that was because I hadn't used a DOCTYPE. I have corrected that now and the transition works smoothly in IE8 but have the above problem on IE6 & 7.
3. I find the text in my content sections appear very bold during the transitions.
I know this is a lot to take in so I have invited you on gtalk. You assistance will be greatly sppreciated - this is the best haccordion I've seen and I really wouldn't want to move to another if I can't correct these problems.
Thanks :)
3. I find the text in my
3. I find the text in my content sections appear very bold during the transitions.
Sorry this is only in IE6.
The plug-in works beautifully in Firefox, but as usual, Microsoft insists on making a designers life hell
I really didn't
I really didn't understand...... I was marked with the same problem.......
any one had solution..
Thanks in advance
how can i use Accordion with out tittle <div>
how can i use Accordion with out tittle
need ur help
licence?
the licence is free for use in both personal and commerce proyects? can i distribute it in my proyects?
Yes free for both. Just one
Yes free for both. Just one request. Keep my credit.
Thanks
Post new comment