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
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:
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
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