I’ve been promising to release liteAccordion v2 for ages, but I’ve been snowed under with client work as of late. Last night I finally found the time to complete the last few bits and pieces that I wanted to finish before release.
Plugin Home Page: http://nicolahibbert.com/demo/liteAccordion/
Demo Suite: http://nicolahibbert.com/demo/liteAccordion/demo-suite.html
Download: https://github.com/nikki/liteAccordion
Last edited: 21/01/13
Version 2.2 (21/01/13)
Responsive layout and auto scale images options removed
After some consideration, I’ve decided to remove the responsive options. In it’s current format, the accordion works well on mobile devices, but the mechanics of the interface are not suited to responsive designs (for example, the headers are too small to activate on mobile devices).
Development status: on indefinite hiatus
After this update, I do not plan to continue developing this plugin. Regrettably, I can no longer respond to support emails – please be sure to read the comments if you have any issues, as 99% of them will have been discussed there.
New in liteAccordion v2
Methods:
liteAccordion now has play, stop, trigger next slide, trigger previous slide, destroy and debug methods.
Mouseover activation
Slides can now be activated onmouseover.
Custom easing
The plugin now supports custom easing functions (easeOutBounce is one of my favourites 
) using George McGinley Smith’s jQuery Easing plugin. If you’re not planning on making use of this (i.e. if you’re using the linear or swing easing types), you don’t need to include jquery.easing.1.3.js in your page.
Linkable slides
You can now link to individual slides by assigning a name to a slide in your html, and setting the ‘linkable’ option to true.
Two new themes
v2 features two new themes: the ‘light’ theme, and the ‘stitch’ theme. The light theme is very similar to the ‘dark’ theme, but with inverted colours. The stitch theme is based on Orman Clark’s awesome work (again :p) over on Premium Pixels. An interesting piece of trivia – I’d never heard of SlideDeck until ~2 months after I built version one. If I’d known about it I might not have bothered 
Demo suite available
It can be a bit time consuming to fiddle with the settings of jQuery plugins to get the effect you want. Edit JS, reload page, rinse, repeat, yawn. I wanted to alleviate some of the tedium for myself during development, so I created a tool to let me try out different combinations of settings without reloading the page. Try it out for yourself here!
I’m certain there are some bugs lurking around, so if you find one I’d really appreciate it if you could log it on Github for me. If you need some help with something, or have a feature request, please leave a comment on this post. Thanks!
Related posts:
I love light accordion!
However, I’m trying to use it on the same page with JQuery Superbox! http://pierrebertet.net/projects/jquery_superbox/
They use different versions of the jquery.min.js lib.
light accordion uses :
superbox! uses:
I can’t get both working at the same time. Any ideas?
I tried adding:
var j$1 = $.noConflict(true);
But that breaks my accordion.
Help please.
Hi Nikki.
First I want to congratulate you for this excellent slide. But I have a question regarding how to use the stop method. I wanted to put a play and stop button … How do I put a link to it to stop and start?
Thanks!
You’d create your button as normal, then create a click handler for the button, and put the play or stop method inside the click handler.
Nikki – more kudos…this is a great tool…1 question…using the nav/linkable option…it works great to open the slides…but is there a way to close the slides from the same #/nav link
my dev site is here: http://jmstaging.com/TCR
I know you mentioned you’d be taking a hiatus on this, but if you could help on this, it would be so awesome!
Thanks,
JM
I don’t think that would be an easy thing to accomplish! You can’t do that with the plugin as it stands, and I’m afraid I don’t have the time to do it for you. Perhaps a local freelancer could help you?
Hi, I wondered If you can let me know how to enable scroll bars inside the accordion, Did tried with CSS overflow property and did tried with the container controls by making scrol true, however it is not reflecting, seems like the scroll bars are override by the liteaccordion CSS.
Set { overflow-y : scroll } on the div element.
Hi Nikki.
I know your not accepting support queries on this anymore but I’m having an issue I’m struggling to solve. I’m using your accordion (and it’s working lovely) however I’ve set up linkable slides. These work great, but if I go to say the contact page or site map and click on the navigation to say website.com/#slide3 it just shows the homepage on slide1 not the homepage on #slide3.
Is there any way of getting this to work or is it unfixable? I feel a bit like i’m going in circles with it and need to inform the client.
Any help would be really appreciated!
Hiya!
Change line 190:
$(window).on(‘hashchange.liteAccordion’, function(e) {
to:
$(window).on(‘load.liteAccordion hashchange.liteAccordion’, function(e) {
this will navigate to slides on load
Thank you. You’re a star!
No problem
Hello Nikki,
You did a great job! Congrats! I have a question: How do I perform a validation to allow the user to go to another slide? I have no skills in jQuery. My intention is to make a CRUD within the accordion. Slide 1: Insert the name, Slide 2: Insert the email, etc. How I block the user to go to other sliders if he doesn’t finished the earlier step? Is there a way to do this?
One more time: the accordion is fantastic!
Interesting use case. Hmm. I think firstly you’d have to unbind click activation within the plugin. Then, on successful validation of the input (my earlier tutorials on form validation might be helpful here) you’d trigger the next slide using the next() method.
Hope this helps
Sorry Nikki, but I hadn’t found the tutorial that you’ve mentioned. Could you send me the link?
http://nicolahibbert.com/jquery-form-validation/
after a while the flaps not working in firefox, I click on the other tabs but remains just that crashed in, sorry for the mistakes I do not speak English
Do you have a link to the site demonstrating this behaviour?
never mind figured it out
i was testing it with just the 1st slide fleshed out
once i put in stuff in the 2nd slide the 1st slide got drawn over/pushed away
thanks again for great tool
hi nikki – great tool – love it.
im sure im missing something basic – sorry for simple question
but my text inside slide is not slidiing out with slide but staying put
what am i missing?
i tried to imitate everything in your source
thanks for your help – mark
Hi,
Very thanks for providing such a nice slider.
Nps
Hey Nikki,
You did some amazing work here, and I think the slider looks fantastic. I have it incorporated in my project right now, and it is perfect. Thank you so much for sharing this.
I am wondering if it is possible to alter the size of the first panel only? I have been playing around and I can’t seem to do this, just wondering if it would be possible.
Thanks again, and great work!
Geoff
Hey Geoff,
You can’t alter the size of individual panels I’m afraid – not without a huge JS re-write in any case. Glad you like the plugin
Cheers,
Nikki.
Hi again,
Yeah I thought that was the case. I might try to alter the JS at some point, but for now I am just thrilled to have this plugin. Keep up the great work.
Cheers,
Geoff
Awesome piece of work ma lady. I owe you a coffee for this, too bad we ain’t from the same place.
Hi,
Thanks for providing such a nice slider.
But, I have facing some issue in IE8 and IE9 (compatibility view on). The problem is that the h:over effect (pointer and the click effect) is only working when clicked on top most area. The click is not working when clicked in lower side of the column (like it works in FF) .
The example hosted on your site also showing same problem when viewed on IE8 and IE9 (compatibility view on)
Please help.
http://codecanyon.net/item/accordion-pro/1506395/faqs/13410
Thanks for your reply Nikki.
But, I even checked the site example on IE 8, still the hover is not coming all over the vertical bar…when I am moving down the bar the hover is disappearing.
If I am not bale to solve this issue then may be I have to search some other jQuery script..
Please try once at your end.
Thanks
It won’t work with compatibility mode turned on.
Beautiful work
I can’t seem to get the slides to do anything. They won’t animate when I hover or click, although they do display correctly in their “closed” position on page load.
They just don’t seem to want to open and my content divs are like 194×949 px in size…
Any advice?
There isn’t a ‘closed’ position with this plugin. What does your error console say?
I am guessing this has some issues with the Mobile platform. I have tested on my Galaxy S2 Skryrocket and HTC Inspire with no success. The Bars align to the top instead of rotating. The navigation is still there, but the positioning is no bueno.
Anyone have the same problem or know of the fix.
I did test the demo site as well with no luck
Hah, the mobile ‘platform’. Don’t get me started on that. If you test on an iOS device, it works fine. Test on Chrome, Firefox, Dolphin, whatever – on Android – works fine. Test on the stock android browser… well, it’s anyone’s guess. I’ve had a lot of dealings with the stock browser on various different versions of Android. It’s the single worst browser out of any I’ve had to deal with, including IE5.5. At least IE bugs are predictable, and replicate-able. Just thinking about it makes me angry :/
Yeah I can imagine its in pain, I did find that non stock androids work as well as IOS. So I will deal.
My new problem is the hash linkable slides. Maybe I am a blur on missing something but I can’t seem to make it happen
Main Page
http://turningpointrenovations.com/contact/default.html
Thanks God, I found expected plugin for my new Project
Is there a way to open a particular slide by calling a method? I don’t see a documented method for that. Is there an undocumented method that will accomplish that?
Methods are all documented on the demo page http://nicolahibbert.com/demo/liteAccordion/
Hi,
I am having some problems getting the bullet list in my DW6CS6 file to show up indented in liteaccordion panels. The are there but they are not indented. Any help would be appreciated.
Regards,
Darryl
Sounds like the list items within your slides are being overridden by the styles used for the slides themselves. Something like #accordion li > div li { list-style-type: disc } should fix it.
When i am moving through slides, blurring occurs in slide panes…Its visible in your demo page also. Pls provide a solution for this problem.
Browser?
Hi Nikki, first of all, sorry about my bad english…but i’ll try anyway
Last year i used this site to help me on a website project [http://www.juliabosco.com.br/tempo] and it was working until this month
I thought it could be some wrong update i’ve made, but as i have some backups in my external drive, four to be precise (january 12, april 12, july 12, october 12). I’ve tried to use them all – but unfortunatelly nothing works anymore. The good part of this: it was not a update i’ve made recently. The worst part: i can’t understand what is going on!
The first thing i thought was that some of those *.js files has changed. I downloaded them, and nothing happens! Even the “index.html” that is in the folder “test” of the “liteAccordion-master” is not working too.
I’d be very happy if you could help me, again
Thank you.
You have a lot of javascript errors on your page, that could be causing it?
I noticed – not using my “skills level zero”, but using Safari Developer Tools
But the mystery is why it was working fine until last week, although the errors of javascript were there since last year. I was really betting on an update of js files due to some change of the browsers…as i said before, even https://github.com/nikki/liteAccordion/blob/master/test/index.html is not working.
Well, I have no choice, i’ll keep looking, and looking… but thank you a lot! No doubt that It was good while it lasted – and will be awesome when i get this site working again.
Your version of jQuery is really out of date (1.4.2), and your version of the plugin is fairly old. Grabbing new copies of each should fix your problem.
And you need a copy of QUnit to run the tests in the /test folder
Hope this helps!
I got all the files i could find at your link “download”- i’ve got the ZIP file and nothing works yet!
Ok there is a lot of errors, old version of this and that, but it was ok until last december! It’s really weird!
I’m getting crazy! It’s really a mystery as i said
How a backup that was working (and that is why i’ve made the backup) just stops! Sorry, i know that you can’t do my job, but as i’m all alone doing this, i need to share… near fifties, just trying to keep ok my blood pressure
Best advice I can give you is to go through the walkthrough http://nicolahibbert.com/demo/liteAccordion/ and make sure you’ve got the latest version of jQuery. Hope that helps!
Hi Nikki,
Is liteaccordion using jquery-ui version 1.9.x or 1.8.x? I couldn’t tell looking at github. I’m upgrading to 1.9.x and hoping I won’t break my use of liteaccordion. Currently, 1.9 is still backward compatible to 1.8. But, with jquery-ui 1.10 already a release candidate and they plan to deprecate 1.8 completely. Do you plan to do anything with compatibility to 1.9.x then 1.10?
Hey Tina,
This plugin doesn’t use jQuery UI, so nothing to worry about
hi,
How the rtl right? im need
Regrettably I won’t be implementing RTL in the foreseeable future. If anyone wants to take this task on, I’d happily check over your code and merge it into the master branch.
Looking forward to see the implementation of the RTL func through this plugin…