***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:
Nikki,
I have been trying to get this to work on a site I am redeveloping for work. I have plugged it all in just the basic info for now havent even began to change the css and for some odd reason I cant get this to show up right. it just shows up as a list with no styling or anything. am i doing something wrong?
Do you have a link I could see?
Hi,
We are using the Accordion plugin on our company homepage and it is not looking right on my bosses computer. He is using IE9. It works on IE9 on my coworkers computer, but not his. It is also working on IE8 and Safari, Chrome and Firefox. Is there something I’m missing?
Your edited version of the css is missing the IE fixes from the bottom of this: https://github.com/nikki/liteAccordion/blob/master/css/liteaccordion.css
Hi Nikki,
Awesome Slidedeck!
I wonder if its currently possible to have the slidedeck animate through all the slides once, returning to the first open slide?
The reason for this is to show a user who enters a site (who is a little less versed with websites) that he/she can click the tabs to see new slides?
Regards,
Aid
http://www.parachutegame.co.uk
You could have the animate function loop once if that’s what you mean?
Hi Nikki,
Yes that’s exactly what I mean !
Thanks for the response
Regards,
Aid
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
Hmm, maybe the padding isn’t scaling in the css? Do you know how to use your browser’s developer tools to check?
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.
I’m afraid not. Could you not force standards mode on your page?
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!
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
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
The plugin doesn’t support fluid width, but you could write a function to change the width on browser resize?
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 ?
Do you have a link I could look at?
@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.
No worries. I’ve updated the plugin since then, so be sure to get a copy of the latest version
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
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!
Using the hashchange functionality (‘linkable’) would be the best way to achieve this.
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
Are you using the latest version?
Simply love it ! Great work
Keep it up
Thanks
How I can activate slides directly?
same as liteAccordion.activte(slide3); ?
You could use the hashchange functionality provided in v2?