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:
Hello Nikki,
wonderful work, it’s the best implementation I could find on the web.
Some other people have comment this before but I couldn’t find any solution:
it works great in Chrome, Firefox, Safari and Opera but I haven’t been able to make it work in IE.
The problem is not related with highlight syntax js, the problem is that the accordion is shown as a big red vertical div with all the content on it.
I really want to use it and I was wondering if you could help me with that.
Thank you very much.
PS. Sorry for my english…
Do you have a link I could look at?
This plugin is simply AWESOME, when it works. Haha, I had just implemented it beautifully on another site earlier today at work and now come home and I can’t get it to work for some reason. The .liteAccordion() isn’t applying anything to my div whatsoever. Been pullin’ my hair out tryin’ to figure it out but I’ll be glad when I do because I love this. Keep up the great work!
Do you have a link I could look at? Don’t mind helping out
Hi there Nicola,
Great slider you’ve made. I have a small question – how do I get the text to be (eg the bottom) justified? I’ve tried doing it within the “.accordion .slide > h2 span” but it isn’t working – this seems the logical place to change from text align left to right but it doesn’t work. hmmmm
Cheers very much
hi nikki!, I need a little help
everything works great on Chrome, Safari, FF, but I can´t make it work on IE. don´t know why.
can you see it please: http://quehacemosonline.com.ar/qh/
thank you thank you thank you !
marina
Hi Nikki,
I see the onmouseover as a new option but how do i add it? Thanks.
nevermind, I found it. line 23 of the liteaccordion.jquery.js file for anyone else interested. otherwise you can delete these two comments. thanks.
Set it in the options object you pass to the plugin on instantiation ({ activateOn : ‘mouseover’ })
Hi Nikki,
Can this plugin work with less or more than 5 slides?
Thanks!
Yep, you can have as many slides as you want
i have the issue reported here: https://github.com/nikki/liteAccordion/issues/39
in IE9 (not in compatibility mode..)
is there any fix for this?
Thanks!
Nikki, I really need my accordion to adjust to the width and height of the content. Is it not possible to get this to work with %?
It would take a lot of modification of the core…
Hello –
This is an excellent plugin.
I’d like to try to modify it so that slide 1 can either be completely collapsed or about 200px wide when open. Slide 2 would always be open but would vary in width depending on whether Slide 1 was collapsed or expanded. Think there is a way i can modify this plugin to do this, or would you recommend starting from scratch?
hi, again …
I have another question, if I wanted to make the entire div have the event to activate the plugin, which code segment would need to modify. Thanks and sorry the inconvenience
Hello Nikki, fantastic job.
How I can call an event when displaying a slide?
example: if (Id_slide == 1) {alert (‘Hello!’)}
Thank you!
Use the callback functions
Hey Nikki
Great work on this – thanks!
i must have done something wrong here… trying to setup a barebones version of this. on FF it works great, though on IE9 and IE8 the H2 triggers are off.
can you tell what i did wrong?
http://bit.ly/wBsMBj
thanks!
Moshe
Hey there,
I have a quick question. Is there any way to pull from another HTML file and have it nested within one of the panes in your accordion? If so what is the best/proper linking method to do that?
Thank you,
Melissa
I’d go with Ajax
Hi, I use the plugin and it’s great … but I would like to show a little space of the hidden div with the content, how I can do this?
Perhaps alter the left margin on the slide divs within the plugin file?
Hi Nikki
you’ve done a great job.
I was just wondering whether there is anyway of not having to set the container height?
I would like to use this script on a dynamic page (ie content retrieved from a DB) where the amount of content in the accordian changes considerably each time the page is loaded – so a fixed height is no good.
Thanks
chris
I’m afraid not (it might look a bit odd?)
Hi Nikki,
I need help. I tried you code. Somehow, the image has been pushed a little to the right and down as well. I use the basic one, my html pretty much straight forward, and I did not change the css. I use your css. Any idea what might have gone wrong.
Thanks.
Do you have a demo I could look at?
hi! thanks for this accordion. is great
I have a question (sorry if my english is too bad)
it is posible to back to de first slide on mouseleave?
please this wll help me a lot.
thank you very much!
Not from within the plugin, but something like:
$(‘#yourdiv’).mouseleave(function() {
$(this).find(‘.slide:eq(0) > h2′).click();
});
should work I think?
thank you for answer
didn’t work
is an excellent accordion any way
I made a mistake, is working!!!
thank you very very much!
Is this the right way to use it?
$(“#demo”).liteAccordion({“containterWidth”:955, “headerWidth”:80, “containerHeight”:585,”activateOn”:”mouseover”,”firstSlide”:0,”linkable”:true});
$(“#demo”).mouseleave(function() { $(this).find(“.slide:eq(0) > h2″).click(); });
It’s doing nothing here unfortunally
Is “demo” the id of your div? Plus you have a typo – containterWidth
Hello and thank you so much for the accordion,
I wanted to use it to show groups of photos/data in a popup modal and it works perfectly.
My question is, is there and easy way of setting the firstslide to the item that matches the querystring from the background page?
The data is grouped in a specific order and sometimes I want the image clicked to show up in different positions within the accordion. I am hoping to use the querystring “?id=#” but so far have not found an easy method. I am using colorbox in an asp.net page.
I wouldn’t say an ‘easy’ way, but if you know enough JS you could modify the ‘linkable’ function?
hi nikki
nice your work.
how change direction to rtl ???
for rtl website ?!
tanks. good luck
Not supported I’m afraid! It wouldn’t take much JS knowledge to implement it though…
Hi! (: Is there any way to “configure” different title widths?
Yep, the headerWidth setting.
I’e already tried but i couldn’t get multiple widths to work.. I mean, the first title contains an image which width is 60px, in the second title another image with a bigger width and so on.
Ah ok, you wouldn’t be able to do this ‘out of the box’ I’m afraid
Greetings,
THANKS for this jQuery version!!! I’ve been waiting for exactly this. I used a prototype version some years ago at http://www.damon-nestor-ploumis.de. Now I can finally update it to a jScript I can deal with.
My puzzle has always been (with this customer) how to set the container height to 100% or overflow:show !important;
http://www.damon-nestor.ploumis.de
Now I’ll play with it and see what I come up with.
Thanks again,Mark
Think you must have this plugin confused with something else, I only wrote this last year
Hi there, this is a brilliant piece of work and I’ve been using it for some time. I run a VB forum and I’m changing over to a new style and when I move over the accordion the images don’t line up.
Works fine here: http://www.guildinn.com/forum/index.php?styleid=22
Images are not aligned correctly here: http://www.guildinn.com/forum/index.php?styleid=39
I was hoping you might have an idea as to what is causing this, maybe you can more easily see a clash?
Many thanks for your time and help with this.
Hi,
Realy nice work whit the accordion is great! It’s well built and well documented <3 .
I have one problem tho! i would like that the "bookmarks" are on the right side of the slider. I can explain it like i want this accordian script but mirrored! Think it like all the content boxes are to the left of the bokmarks on the right . When you press a bookmark the box go to the left side and reveal whats under them!
I can't understand what to change to achive this! Could you give some pointers or maybe send me in the right direction to get a accordion that works like this.
Thanks
Emil E
You’ll need to know a little bit of JS to customise the script to that extent…
Congratulations!! Nice job.
I’m trying to use your plugin to remove the flash from this site: julianalahoz.com, but I didn’t include the code to close the slide before open another again.
Can you see if possible to do this with me? I pay for this job, of course.
Regards,
Tiago
I’m afraid I’m pretty busy at the moment, perhaps a local freelancer would be able to help?
Hello
Your accordian menu is superb. I am still adding pages and links to it, but it won’t work in IE8 – the only IE I’ve tried so far. Opera, Chrome and FF are perfect. I shall keep plugging away at the problem, but I’d be very grateful if you could just glance at it, think, gosh what a lovely antique shop, and tell me I’ve stuffed up something very simple. Thankyou.
Remove the syntax highlighter scripts you copied from the demo page
Hi,
I really like your plugin. Is there an easy way to try and theme it myself? ive managed to get the background changed but Im having difficulty working out the slides. Because the bg height also changed, I cant get them to change height let alone use as image as the slide instead of colors.
Any pointers on what I need to change, already spent a few hours trying to work it out!
I think the best thing to do would be to take queues from the basic theme in the stylesheet. If you wanted to set an image on one of the tabs, you’d start with .basic .slide > h2 span {}.
I set the width like this
$(‘#yourAccordion’).liteAccordion({containerWidth : document.width});
so i can have a 100% width. Unfortunately the browser has to be refresh every time window is resized. Do you have any solution so it will automatically resize itself? thx
Perhaps destroy/re-init the plugin onresize?
Excellent work.
It’s too bad, though, that using the ‘name’ attribute in a list element doesn’t validate and, therefore, using the ‘linkable’ option isn’t ideal.
Might change this to data- at some point, but it not validating isn’t a good reason to not use it if you need to. Validation is a guideline, not a rule
Another question: is there any way to make the autoplay just to cycle once?
Not currently I’m afraid, you could rewrite the autoPlay function though if you know enough JS…
Hello Nikki, great Accordion plugin. Thank you for posting it.
I have a question, I hope you can answer.
If you see at http://nfgrafx-com.securec29.ezhostingserver.com/en/new.cfm, the accordion tab or header is at the left hand side of the image it represents.
I’ve tried to turn it around but the plugin breaks.
Is there any way to make the header of the current open image clicklable in order to go back instead of clickling on the header of the image we want to activate?
If this is not clear, I can send you an image with some screen captures.
Thanks again!
Tbh I’m not entirely sure what you mean? Could you send some screenshots please?
Lol no worries!
Thanks for uploading the images now, that seems to have fixed the problem in Firefox. Although for some reason the bg_stitch doesn’t show in IE7/8 but the bg_noise does? I can live with that though so don’t worry about it. (I am using v2.0.1)
Thanks again for your time!
bg_stitch won’t show in ie7/8 because it’s used as a border image, and border-image isn’t supported by those browsers (it’s a css3 thing).
Hi Nikki
Love this work! It is exactly what I was looking for!
I’m prob being stupid but where are the bg_noise.png etc files for the stitch theme? They are not in the folder when downloaded?
Also for some reason in Firefox, the coloured slides (ie 1, 2, 3 etc) are displaying as much thinner than in IE and Chrome etc.
Thanks,
Nope, that’s me being stupid :p
I left an entry in my .gitignore file that prevented the files being pushed to Github, I’ve corrected that now, so you can redownload from there.
Thanks for pointing it out!!
I’ll also have a look at the stitch theme in Firefox, are you using the latest version? OSX/Windows?
hi,
have you considered making this into a plugin for wordpress?
there are ones that do this but yours is way better.
As it happens I’m just finishing off the WordPress version. Watch this space
nexous.click(function(){
if( core.currentSlide 0)
methods.prev();
});
Hi Nikki,
Following my previous comment, I also added the possibility to run the slides via external buttons…
Here is the code:
previous = elem.children(‘div.AbsoluteHidden’).find(‘#car2prev’),
nexous = elem.children(‘div.AbsoluteHidden’).find(‘#car2next’),
under bindEvents function:
nexous.click(function(){
if( core.currentSlide 0)
methods.prev();
});
Hi,
It’s a great plugin.
I added the possibility to put pictures instead of the slides .
Feel free to contact me via my email if you are interested i send you the code.
the rounded corner doesn’t work in your demo. Hope you can find out why. Other than that, great work!
I’m assuming you’re viewing in IE? CSS rounded corners aren’t currently supported (by the browser) in IE.
I’m very new to jquery and have found this tool to be very clean and understandable. Thank you for doing this. I know that this may seem stupid, but I was wondering if you could guide me as to how i can make the slides for not auto advancing. I’ve been looking at liteaccordion.jquery.js and see that there is a var for autoPlay, but when I toggle between true and false, i see no difference. I’m using this as an educational tool and would like the students to advance them on their own.
Thank you!
EK
When you instantiate the accordion, you pass an object containing your options to it (e.g. $(‘#yourdiv’).liteAccordion({ options : here }). If you omit ‘autoPlay’, the plugin will not automatically cycle through the slides. You don’t need to touch the plugin code, just use the public interface.
You would use $(‘#yourDiv’).liteAccordion(‘next’); to transition to the next slide. Hope this helps
¿Por qué escribe: please don’t copy and paste this page it breaks my analytics! en el código HTML? ¿Esa parte del código no pertenece a la licencia MIT?
(function($, d) {
// please don’t copy and paste this page
// it breaks my analytics!
// demos
$(‘#one’).liteAccordion({
onTriggerSlide : function() {
this.find(‘figcaption’).fadeOut();
},
onSlideAnimComplete : function() {
this.find(‘figcaption’).fadeIn();
},
autoPlay : true,
pauseOnHover : true,
theme : ‘stitch’,
rounded : true,
enumerateSlides : true
}).find(‘figcaption:first’).show();
….
Hi Ricardo – the license is MIT, I just didn’t want people copying my analytics tracking code as they have done in the past (you get a lot of false reports in Google Analytics).
Having an issue with IE8 and content wrapping in the main div. I opened a ticket on GitHub for the issue and can send screenshots of the problem if that is helpful.
Hi Jim, a screenshot would be great thanks. I’ll check it out in the meantime though (gogo gadget VMWare :p)
Hello Nicola,
Great website you have there, also great plugin.
I found a problem using it, because I can’t manage to make it work, I’ve tried what you said, copy paste code, etc. and nothing
Hope you can help
Thanks
Have you included a) jQuery core; b) liteaccordion css; c) liteaccordion js; in your page, and d) instantiated the plugin in your page?
Hi Nicola
Thanks for this plugin – there are many that do the same thing but yours is the best I’ve come across!
I’ve successfully implemented the slider but I’m having a problem in IE9 where only the top of the links is clickable. I’ve checked that it’s not rendering in compatibility mode and that there’s a doctype (html5). It renders and works perfectly in IE8.
The slider in question is over at http://www.renewphysio.com.
Not sure what I’m doing wrong. If you could have a look I’d really appreciate it!
Fixed via Twitter
Hi, i try your accordion and works fine but if i set linkable true when autoplay is true, the links don’t works…. is a bug? is possible to make both active?
tnx
No, this is intentional – if you leave autoplay running, you’d get a lot of links to the same slides in your history – so pressing back would rotate through the slides one by one. Leave autoplay running for long enough, and you could end up with 100 entries in your browser history for the same 5 slides. If you really wanted to get to the page you were looking at previously, this would be really annoying.
I really like this plugin but cant figure out how to call its methods like stop() from outside the plugin. Could you give an example of this?
Thanks
Hi Nigel, thanks for pointing this out, I need to revise the documentation. To call a method, use $(‘#yourDiv’).liteAccordion(‘methodname’). Thanks!
Hi Nikki,
I love your liteAccordian plugin and whilst its not exactly what I wanted, it does the job!
Just wanted suggest an edit on your usage instructions though.
You really should mention that you require a doctype for it to work. It should be obvious to most developers but it even caught out myself when the plugin just would not work!
Thanks again.
Rich Haynes.
I honestly can’t imagine a scenario where you wouldn’t have a doctype
HI NIkki,
Quick question, if I was to upload a video here, and then when I have to go to a new slide, is there a way for that video to stop playing? Right now, when I add a video, it just keeps on going even if I clicked on the other slides to switch slides. Any thoughts?
Hi, it’s as I said below – call the JavaScript method for stopping the video in the onSlideAnimComplete callback function.
I’ve been struggling with a similar situation…
When on a different slide to the video, if the mouse moves over the screen where the video lies, the video comes to the front of the screen, overlapping all other content.
I’ve tried a couple of things to no avail:
1. I used the onTriggerSlide and onSlideAnimComplete methods to fadeIn / Out the div holding the slide content, but nothing happened at all, even though the methods were called.
2. I looked at your jQuery file and tried adding a ‘selected’ attribute to the active div holding my slide content, so I could hide the non-active slides, but that hasn’t worked either.
I’m at a loss really – I don’t know jQuery very well.
Any ideas or code I could try? This is frustrating the hell out of me…
Is it a Flash video perchance? Flash video positions itself above all other content (z-index), you need to set the wmode to transparent or opaque. http://stackoverflow.com/questions/9081955/chrome-you-tube-embed-display-errors-with-liteaccordion
Doh, I’d forgotten about that. Thanks, that did it.
Hi nicola,
Your accordion is awesome! I’ve been browsing the web during the past few days looking for a nice accordion and yours is definitely the most beautiful with the stitch theme. I did download the last version but I couldn’t get the last version of the stitch theme. I guess images are missing, could you please upload them?
Thanks much and once again great great work!
Everything is up on Github
Hi,
Your accordian is great! The only thin I have noticed is if I try your accordian in IE version 8 there is no color or stitches showing up on the stitches template, the panel edges are just grey? Works great in Firefox and chrome, but I’ve tried it on 2 computers running IE8. Is it the css? or pngs?
Thanks,
W
Fixed in v2.0.1, thanks
on ie9 the tabs are colored and bg_noise.png is applied but not the bg_stitch.png texture.
i Hope this will be useful for debug it and help you
Fixed in v2.0.1
Nice work!
I till testing the V2 on ie8 and seems the stitch theme not works.
Tabs colors are not applied and the bg_stitch.png texture too.
Seems only the bg_noise.png is applied to the area
Any solution ?
ty so much
Hart
This was fixed in v2.0.1. Thanks