Horizontal Accordion jQuery plugin

liteAccordion

***Version 2 released***

I started work on a horizontal accordion plugin last week, I think it’s ready for it’s first release.

Demo: http://nicolahibbert.com/demo/liteAccordion/
Download: https://github.com/nikki/liteAccordion

@everyone having problems with ie8/ie9
The plugin works correctly in ie8 & ie9, it does not work in ie9 switched to ie8 standards mode, or ie9 compatibility view. If you’re using ie9 as ie8 to debug, the tabs will only be clickable at the top, so please test in ie8 native. Compatibility mode should not be triggered if you use a strict doctype.

Updated v1.1 (21/03/2011):
Added a pause on hover feature to the plugin.

Please post any feature requests in the comments.  Thanks :)

Related posts:

  1. Lightweight jQuery tab plugin
  2. jQuery Form Validation
  3. HTML5 Forms Support Detection with JavaScript

155 Comments

Got something to say? I'd love to hear from you!
Leave a Comment

  1. liz says:

    Looked all over for exactly what you’ve provided – absolutely, without a doubt the very best sliding image menu available – and I’ve nearly got it how I want it (when it will go online) but I’m using images 680px wide and have reduced the vertical bars to 20px (I don’t need the text.) and I’ve just spent all day hunting for how to close the gap between each image and the left clump of vertical bars. CanNOT solve it! I know the solution is bound to be something fundamentally simple, but it’s 42 degrees today (Australia) and I give up. Thankyou

  2. Kevin says:

    Thanks for the plugin Nikki.
    I understand all the blah blah blah’s of quirks mode, inspite of that, was wondering if you have any work around to get this plugin work in Quirks Mode.

  3. Michelle Lana says:

    Hello! Great slider! I have a quick question on putting in videos using this slider. Everything works well and I have implemented my flv videos in the slider. But, when I click on the bars (for ex: slider 1, 2, 3, 4, or 5) the video is still playing. Is there a way to have the slider so that when I click on one of the bar choices, the video will stop playing? Right now, let’s say I have a video embedded on slide #3, when I click on slider #4 for example, (the video on slide #3 is still playing). Is there a way to turn that off when I click on another slider bar? Would appreciate your input! Thank you!

    • nikki says: (Author)

      You’d need to call the js method for stopping flash video in the onSlideAnimComplete callback function. If it were a HTML5 video, this would be video.stop(). I don’t know what it is for flash, sorry :)

  4. Gyan says:

    Thanks for this wonderful accordion. I am using Fluid layout in my website. How I can use this accordion in my Fluid layout? Something like “containerWidth : 100%”

    Regards
    Gyan

  5. Rafiur says:

    Great plugin.
    Today when i work with this plugin i have a problem in google chrome. In all browser its working fine. But in google chrome when i click on the bar or the text on the header its will not animated. But without auto-play when i click only the number (bottom of every slide) it will animated. So now what i do ?

  6. Joey says:

    @Nikki

    Thanks for your response a few weeks ago. I have busy with other projects. I do not have a site live on the web. I am currently building the site in Dreamweaver. And when the accordion did not work for me I put that project on the back burner. I will try again to see if I can get it to work, but in the mean time if you will email me at the address I provide to complete this form, I will gladly send you a html file of what I have. I would really like to use an accordion nav bar since that is the look I am going for. Thanks for all your help.

  7. NyZone says:

    Hi,

    First of all, thanks a lot for this great plugin. It is awsome!
    I am quite new to jQuery and could not figure out how to call jquery ui methods on liteAccordion. To be precise, I want to switch to a tab after a click on a link, so I assume in jQuery it is something like .accordion( “activate” , index ). What is the way of doing it here?

    Thanks again

    • NyZone says:

      I got around this by naming the slides and calling the click() on them. Not sure if this is the right way of doing it but it worked. Thanks again for this great plugin!

    • nikki says: (Author)

      Using the hashchange functionality (‘linkable’) would be the best way to achieve this.

  8. Patrik says:

    Hey Nikki,

    thank you very much for your nice accordion. It’s simple to use and easy to setup.
    But I have a kind of a problem :-)

    I’m using it for a private project at the moment. Every time the accordion does the autoplay slide (emulates a click on the next tab, if I understood the sourcecode right?), my drop down menu collapses again (looses focus as it seems).

    I’m using thw following jQuery menu:
    http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

    -> I’m using the i-Pod style with breadcrumbs menu. It looks very cool and is customizable by help of the jQuery CSS theme selector :-)

    So perhaps you have a hint or clue, why your cool accordion closes the menu at every new automatic slide effect (slideshow/autoplay activated with let’s say 10s -> every 10s the menu will be closed again :-( )

    Thanks for the help.

    Regards
    Patrik

  9. Gautam Krishnan says:

    Simply love it ! Great work :) Keep it up :)

  10. tei says:

    How I can activate slides directly?

    same as liteAccordion.activte(slide3); ?

Leave a Comment

If you have any thoughts
or feedback, please
leave a comment.

*