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 can’t seem to update successfully. Is there a manual for updating?
You just have to replace all the old versions of files with the new ones. Easy
The slider seems to be not working in my iphone 4gs with ios 4 in it . can you please tell me how to make it work in it its working in android devices?
I don’t have a device with iOS 4 on it to test on I’m afraid. It’s tested and working in iOS 5 upwards though.
Hi Nikki,
I’ve implemented your fantastic accordion into my site but cannot for the life of me get the height correct. I’ve tried setting the containerHeight and maxcontainerHeight with responsive turned on and am always getting a small accordion. If I turn off responsive and set the height, this works, but I then loose the ability to scale across the width. Is there anyway to have a responsive width, but either set the height to a value or auto ?
Thanks Ian
I’m re-working that section atm. In the meantime the best thing to do would be to set a fixed height. Sorry about that, I hope to get that fixed shortly.
Hey Nicola, thanks for this great accordion!
Any tips on integrating touch slide events to also make it work by swiping the headers on mobile devices?
Find the part of the plugin that binds events and bind touch to the same events that onclick triggers
Yes, but then to let the user actually “slide” the slider by swiping it on the screen is where it gets complicated, since the animation would then have to be synced with the position of the finger
Yep… not something I have time to implement I’m afraid
Very nice acordion example. Thanks.
Hi,
I am very new to web development and plugins. I am imbarrased to ask my question… but… how do I download this plug in? I seem to not see any link implying “click here to downlaod” or similar… Once again I am very new… Please help!
Go to the Github site and click the button that says ‘zip’.
Thanx. Good job.
In a future add option to change text direction in header.
To do this I had to change core css to undo rotating and lib to correct header size.
Hi,
It looks like commit for issue#60 to fix bug when linkable option is set to true, broke the ability for you to click on the slide that’s already activated, and cause the activated slide to close itself (sliding to the right) to open the previous slide. I added back core.animSlide.call(tab) and it works again but obviously it breaks the linkable fix. I’m not sure what the solution should be.
Thanks for the heads-up, I’ll look into it.
Hi,
I’ve have the default implementation. When I click on the activated slide, it is not sliding back to show the previous slide. Any ideas?
Hi Nikki !
I’ve a little question, can I add a scroll bar when my content is too large ? I’d like to do an horizontal scrollbar. Thanks for your answer !
I think it will do this automatically, but just in case it doesn’t, add { overflow: scroll } to the css for the slide.
Hi Nikki, great work with this accordion.
I have a question, i’m trying to use the same basic accordion twice in the same page, but the second does not work, just shows the image… It is a way to use it in that way??
Thank U
Have you created two sets of markup and created two separate instances of the plugin? Take a look at the docs page, everything you need is on there.
Hi Nikki,
your work is awesome and i really like it. I have a question it is possible to display the items vertically instead of horizontally?
I’m afraid it’s horizontal only
Hey, quick question, how can I trigger the next slide function? Im having trouble with that.
Great plugin by the way!
Thanx
Use the methods – instructions are halfway down http://nicolahibbert.com/demo/liteAccordion/
Thanx, works like a charm! I´m trying to achieve something a little bit more complex now, I´m using the dark theme, but I want to make the distance between the slide titles shorter, but I can´t find the way to do it. Im also using a headerWitdh of 30, if I use the default headerWidth I can get it right.
Thanx!
Never mind that last comment, I got around it.
I do need to know, in a kind of an urgent manner, when will you have an IE fix for the plugin.
If there´s anything I can help you with in order to get it to work faster, just let me know.
Thanks in advanced
Thank you for your page
Hi Nikki,
I love using this accordian script and thanks for the recent v2 update. It works brilliantly on all current browsers but was recently brought to my attention that it doesn’t work in IE10. Hopefully it’s not a major issue, but is this something you are aware of? If so, do you have any idea when an update may be available?
Thanking you in advance
Hi Sonja,
Thanks for reminding me, I did promise an update for IE10. I’ll look into it asap!
Me again.
succeed in changing the background color!!!
Hola there!
Its awesome.
But how can I change the bkg colour?
CSS
Awesome, can I use it for mi website????
Of course
its amazing nikki thanks alot i am going to use it on my website and i m sure it will look great thanks alot
Hi,, Great work.. just a tiny question,, if you have the accordion set to activateOn : ‘mouseover’, and you have a caption for the first slide and you hover over the same slide header, the caption disappears.. can I overide this ??
Thanks..
You’d need to show the caption only once in the callback
hi,
I was working in accordion control for last one week , but the slides are not working
in IE8. it is working in IE9 and IE7, so please would you suggest me the answer.
i have follow the link
http://nicolahibbert.com/demo/liteAccordion/demo-suite.html#one
thanks
See here: http://nicolahibbert.com/horizontal-accordion-jquery-plugin/
is posible to have full screen accordion?
Should be possible with the responsive settings
Hey Nicola —
A really nice, light, elegant piece of code. Thanks very much for making it available. I thought I’d let folks know, in case they are coming from the Drupal world, that this AccordionLite works beautifully with Drupal 7, *assuming 2 things*:
1. You use jquery_update to get your jQuery version up to 1.5
2. You change the .on() calls in the bindEvents method to .bind().
This allows you to stick with the retrograde version of jQuery that D7/jq_update provides, so you can have all the jq functionality you’ll need elsewhere (expanding fieldsets, Views admin screens, etc.) AND this awesome plugin.
Nicola, do you think this will cause any issues elsewhere in LiteAccordion?
Thanks again,
Ben
Hey Ben, thanks for stopping by
I can’t see it causing any issues, but if it does, let me know and I’ll do my best to help.
Thanks!
Nikki.
Ben,
I’m struggling to get drupal to work with the lightAccordion. Can I ask what you used to call the accordion i.e did you have to wrap the $(‘#mydiv’).liteAccordion(); in any special wrapper.
Note: I have updated jquery to 1.5.2 and changed the header.on calls to header.bind.
thanks
Jon
Hi i updated latest version its working fine in windows 7 chrome browsers, but windows xp same chrome version (vertical lines issue), still issue is there. please suggest me
Nothing I can do I’m afraid
Hi
is there a RTL version for the liteAccordion plugin?
thanks
Afraid not!
Exellent…i find the proplem with the link in each image
…a Nikki you are a gread developer…Bravo….
I put it in my joomla “- )
Thanks, glad you like it
Great work, Bravo…
I ave the same question…
Can in link the pictures inside each slide to an URL (generally to a product category). Many Thanks
George
Yep, just wrap an anchor tag around the image.
Hey there Nicole! I absolutely love your Accordion, but for the life of me i cant figure out how to get it to work! I’ve tried following the implementation steps on the github page, but its still not working. Its shows up but only as an “ordered list” not slides. Ive uploaded the .js files to my webspace and entered the urls in the source fields…but no luck!
I’m not the greastest with html, but i really want to get it installed! Is there somewhere that gives specifics about exactly how the full, finished code should look and where it needs to be inserted in the website template, or could someone help me…lol. Sorry, this is just frustrating. Please take a look if you get a chance: http://lovelylit.blogspot.com/
Hi Margaret,
On the page you’ve linked, I count 29 JavaScript errors. An error in one script can cause other scripts to fail, so perhaps try following the Basic Implementation guide on a blank html page and take it from there?
Hi, Nikki,
I am wondering is there any way to remove the shadow around the border?
I am using the “light” theme.
Thanks.
Sure, just edit the css, it’ll be in the light section somewhere.
Hi Nikki dig the plugin works great.
I was wondering please could suggest how would I go about having all the accordion tabs closed on page load, so that that all accordion tabs are aligned to the right hand side of page leaving a nice blank area on the left hand side for me to use for content.
for example:
firstSlide : 1 //opens slide one on page load
firstSlide : 0 //closes all slides… they do line up on the right-hand side but it throws visual errors where the slides overlap each other
see http://themwebs.me/images/slideAccordion-tabs.gif
any help would be greatly appreciated.
Manny
That would require a bit of fiddling with the core I think
Hi Nikki,
I am looking to disable the “prev”-function that is triggered by clicking on the activated slide.. I can’t seem to find it.. any help?
It’s under ‘methods’ rather than in ‘core’ in the main plugin file.
Is there a way to have all panes expanded?
I’m afraid not!
I am trying to change the container height and seem unable to do so.
I have tried:
(function($) {
$(‘#responsive’).liteAccordion({ firstSlide : 5, responsive : true, autoScaleImages : true, activateOn: ‘mouseover’, containerHeight: 800, maxcontainerHeight: 800 });
})(jQuery);
But I still get a small container height when I try to display a page as an image. Am I missing something basic?
Thanks,
That should work, but it could be a bug so I’ll look into it.
Hello
Thank’s for liteAccordion
can we have the height of menu fixed with the reponsive true ?
Thanks
Yes, that should work if you set the normal container height and the maxcontainerheight to be the same.
Hi,
I spent the day yesterday trying the figure out how to move the “active” h2 from the left of the active div to the right but my js skills are very minimal. I asked the author if it was possible and she said it was if you knew js so I’m wondering if anyone knows how this would be done or has done it before?
Thanks.
Mouse hover and click does not work in IE8 even on demo page.
http://nicolahibbert.com/horizontal-accordion-jquery-plugin/
Hi nikki,
i am brasilian, sorry my english is very bad.
I’m using your plugin but appears lines in google chrome when the animation occurs.
the which may be?
Great work! I really wanna you this in my current project.. I have one problem though:
I get graphical errors (a series of vertical black stripes across the content field, left by the slider) when the sliders are sliding from left to right. There also seem to be a small margin between all slides possitioned to the left. This only happens in Chrome (have tried Chrome, IE, Opera and Firefox)..
Anyone else have this problem? – And does anyone have a fix for it?
Hiya,
This bug was introduced in the latest version of Chrome https://github.com/nikki/liteAccordion/issues/54. It’s an odd one to be honest! As it’s browser & version specific, I don’t think that I’ll be able to fix it from within my plugin. However, I plan to use css3 animations where available in the next version, so hopefully this will fix it
Thanks,
Nikki.
Seems I could fix this after all
Please pick up a copy of the latest version from Github.
Nice Accordion
Thanks Ms. Nikki..
Hi, nice job..interested to have this slide for my assignment….but..unfortunately I did the copy paste as instructed…but my slides not moving…:(..majorrr help pleasee~
Thankss…
Have you followed the tutorial? http://nicolahibbert.com/demo/liteAccordion/
Please ignore the question on my last comment. It is working fine. Thanks so much
thanks for the plugin, I’m using it now for my project. The contents of a div gets cut to the left though when i make the custom width, is there any setting for it to show the full contents of the div without it cutting it.
more power!
Hello,
Is it possible to achieve nesting with this plugin?
Thank You
Anupama
I’ve never tried to be honest! I don’t think so though, there would be a couple of things that would conflict. Sorry!
Hi Nikki, amazing accordion. I have a question: It´s possible add an open/close function on the slides? i´ve been looking and not found it on the js.
Thank U
Hiya,
Yes, that’s what the callback functions do.
Hallo,
Great work, congratulations. I have one quick question: Can in link the pictures inside each slide to an URL (generally to a product category). Many Thanks
Bogvar
Nevermind my previous comment! All is working now
Glad you got it working
Apologies for posting my problem up on your bug page! I have tried using a document.ready function with your slider and it still doesn’t work – i believed it wouldnt after trying another slider as well.. so i’m rather confused as to why it/they dont work now
Could you offer any help as to why the whole script isn’t working??
typo in the above post. It should say (line 82 in the CSS)
i found the offending CSS. The line below (8 i think)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#353535′, endColorstr=’#555555′,GradientType=1 );
It didnt matter what i set the color attribute to, this line would always override any color. Took it out and the color is now white but obviously there is no gradient in IE8. Not sure what the IE alternative is. Thanks. Great accordion.
great accordion. I’ve been playing with it for a few days now & noticed that in IE 8 the dark theme shows the selected accordion text as black/grey but in other browsers FF, Chrome & Safari the text is white. Happens on your demo site too. I’m guessing this should be white. Cant debug the styles in IE so not sure where its coming from
I think those are just the demo page styles. Easily changeable in your own css at any rate. IE8+ has developer tools, the shortcut is F12 I think?