***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:
@Joey Do you have an example page I could look at please?
@Jey
If you still want the slides to start closed, here’s some code I hacked up for someone else asking for the same thing.
http://jsfiddle.net/FYTtq/5/
Enjoy
Cheers,
Nikki.
$(‘#Accordion_Menu’).liteAccordion({
theme : ‘dark’,
containerWidth : 600,
containerHeight : 200,
slideSpeed : 600,
firstSlide : 2
});
For some reason the above code is not working for me. I can see the numbers followed by the text for each instance, but that’s it. I think the scripts are not being loading. Could someone please guide me. I really need this to work. I copy the code directly from your site and still no luck. Thanks in advance.
You are a great man, your code is perfect and works great. But I have seen this thing in a premium template anyway I will use it and thanks for the freebie.
“You are a great man…”
I’m not going to nitpick. Thanks for the compliment
Great plugin, Thank you.
Is there an option to hide the currently selected tab? When i select, lets say tab 3, it expands the content but hides the tab3? Any way of doing this?
Thank you,
@nikki
I wrote a short javascript function (I did not modify your code).
Each slide contains an individual vertical scroller (jcycle) populated via SQL query. I gave the h2 tag a custom attribute, the number of items contained in the respective vertical scroller.
The function is called on page load and slidecallback.
I retrieve the number of items from the currently selected tab with:
// get element by class name
$(‘h2.selected’).attr(‘numitems’);
and call the next slide ( via .click() ) after an appropriate delay using setTimeout.
@fourlights awesome, thanks for that
@nikki
Thanks anyway, i just threw a manual cycling function together
@fourlights would you mind sharing your code in case someone else was looking for something similar? It’s a bit of an edge case to build directly into the core, but you might be able to help someone else out. Thanks
@nikki I got the solution, I didn’t notice the div used for accordion must have a classname ‘accordion’.Now it works fine,Thanks for your work again!
Are you able to adjust the cycleSpeed programmatically after page load?
@fourlights I’m afraid not.
Hi Nikki,
It’s really a nice job!
But i am just can’t apply this plugin into my html
I have the right markups and code like this:
jQuery(‘#id’).liteAccordion();
But without luck.
that’s the link http://diginto.tk/testing
Thanks a lot!
@ziziki You need to instantiate the plugin ($(‘#yourdiv’).liteAccordion()) – the code is on the demo page.
@nikki, yes I know the resize event sucks on different browsers
At this moment I work with mediaqueries (@Media) so I have 2 states (maybe more later on). A reinit would be great because of the two resolutions. That wil solve my problems I guess..
Thanks for all the work!
Is it possible to start the accordion with all slices closed?
@jey I’m afraid not.
I’m not sure if you have it as a new feature or it’s just a side-effect that you didn’t know about.. or if it has something to do with my stylesheets rather than using the themes; but I’m able to have it start closed easily by setting
firstSlide : 0,
It makes sense thinking about it, it was never an intended effect though.
@Vojta,
Thanks for thinking with me
I will try this, but I see that you work with height.. Mine accordion is a horizontal (not vertical) one so the width should be somehow dynamic..?
Is it possible to re-initialize this accordion? So on a different width I can reinitialise this accordion to the correct width?
Thanks again!
Cheers, Peter
@Peter you can destroy/reinit the plugin in v2. I don’t think that it would be great performance-wise though, some browsers fire the resize event repeatedly rather than on resize end.
We love your plugin. Any plans for a vertical version? (with bars sliding up/down)
@flavio I don’t have plans for a vertical version sorry. You could skin the jQuery UI one with my CSS?
I have question about inserting or in each slide. It doesnt work cause it broke layout
My javascript for liquid design:
$(document).ready(function(){
$(‘#accordion’).liteAccordion({
containerWidth : 803, // width of accordion (px)
containerHeight : 1500, // height of accordion (px)
headerWidth : 51, // width of tabs (px)
});
$(‘#accordion’).height(600);
// change height when caption clicked
$(‘#accordion h2′).click(function(){
var h = $(this).parent().find(‘.text’).height();
if (h < 600) h = 600;
$(‘.accordion’).animate({height: h});
});
});
My accordion layout:
… text …
Hi, Wow great stuff!
One question though, is it possible to make this work for a liquid design?
So I have a container with css: min-width:1000px and max-width:1500px;
And in that container a new container ( width: 100%).
The accordion should come in the div with 100% width and strech as you make your browser window larger/smaller to the max/min values of the outer container.
Thanks!
@Peter I have no plans for a liquid version sorry.
Hi Nikki,
I tried the script you suggested and it seemed to work.
Thank you very much!
Cheers,
Chris
@chris no problem
How do I open one of the slides from an external link?
I need the javascript call for this.
Thanks,
K.I.
@istvan you can either wait for v2, or implement the code from issue #19 on Github.
Ok, already found my own answer
if you add this:
jQuery(‘h2′).removeClass(‘selected’).unbind(‘click’);
then it works fine.
Wim
When adding dynamically new items to the accordion, the items don’t behave properly.
I use this code:
function Add(){
current=current+1;
var text=’New slide’+current+’New data2′;
jQuery(‘#list’).append(text);
jQuery(‘#two’).liteAccordion({firstSlide:current});
}
In the normal JQuery component you can use: jQuery(‘#accordion’).append(text)
.accordion(‘destroy’).accordion()
But this not seems to work with your component.
Any Clues?
Yes, a gap between them. You seem to have achieved this with the first accordion on the demo page?
@John In that instance the h2 is transparent and it’s child span has a solid colour to achieve the illusion of a gap. It’s really showing the background colour of the root element.
You’d need to change the margin value of the span in the CSS file if you wanted to vary the size of the margin.
How do I change the spacing between the headers?
@John Did you want to put a gap between them? You’d need to edit the plugin to take account of the extra margin space, as it uses the width of the header to calculate it’s future position.
Thanks,
Nikki.
Hi,
Great plugin!
I have a question though, is it possible to have the first slide open according to the day of the week?
For example, your using the plugin for a schedule. So each slide represents the day of the week. If I go visit the site on Tuesday, the first slide that would be open would be Tuesday.. And if it was Friday, the first slide that would be open would be Friday, and so on.
Is there a script that could be used to do this, thanks?
Best regards,
Chris
@Chris
I can’t think of a script to do this off the top of my head, but give this a try: http://jsfiddle.net/nc7h4/
Thanks,
Nikki.
Hi!
Great PLUGIN! This maybe a complicated request but how do I put an image (lets say my logo) at the bottom of one the listed accordions? For instance I want a small logo png image at the bottom of the last bar. Thank you!! YOUR A GENIUS!
@Joel You can do that with css. Paste this into the stylesheet for the accordion and see what happens:
li:last-child h2:after { content: ''; display: block; height: 30px; width: 30px; background: red; position: absolute; top: 10px; left: 10px }All you need to do then is change the background for your image.
Thanks,
Nikki.
simply awesome plugin
thanks dude
Wow, gr8 stuff…. thanks for this lite jQuery Horizontal accordion….!!
I lied, liteTab is functioning, I was a bit confused due to colors of tabs. But the liteAccordion is still messed up with respect to horizontal size. comment out the liteTab UL / LI elements and then it looks fine again.
http://www.thatdamndesignkid.com/liteTest/
Regarding another question I had asked earlier… the “configuration” panel, in my example, has simulated content that extends beyond the height of the accordion, is there a way to dynamically alter the height of the accordion when the user enters this panel and then reset to default when they click on any other panel?
@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.
Trying it out now but no luck. liteAccodion functions, although the panel size is off. The liteTabs show up on the appropriate page but are not clickable. It seems to be linked to the UL / LI elements within the liteTabs DIV. Do you or anyone else have any examples of these two working together?
Do you have a live example I could look at Brian?
I love this plug and I am having the same problem with IE8(win7 32bit and win7 64bit), waiting for you help .thank you ! ^_^
@bonnie do you have an example I could look at please?
We love this plugin, and wanted to share something back
If you want the slides to be linkable via a url by their slide number, (i.e. thiswebsite.com/slides.html#4 would load slide #4) this code will help you out: http://jsfiddle.net/bandrzej/raA46/
Make sure to put id’s on the div’s in the slide, and to add the slideCallback and firstSlide modifications. It may be easier to include these within the plugin, and then use a option to enable. We just needed it to work for now.
@bandrzej awesome, thank you very much. I’ll be integrating this into version 2, there’s a dev branch on Github for anyone interested on seeing where I’m up to
What’s the minimum version of jQuery this requires? I’m trying to get it running on a Drupal 6 site (jQuery 1.2.6) and it’s not working. Would love to get it going with Drupal! Thanks…
@andy probably 1.4.2, but it should be easy enough to upgrade drupal’s version of jQuery?
@MadebyM, I am having the same problem with IE8.
@Andrew do you have an example I could look at please?
Just wanted to say this is super-amazing and super easy. As someone who can work with plugins other folks develop, but doesn’t have the skills to write my own, this is very, very valuable. Thanks so much!
@dave thanks very much, I’m glad you like it
Another question… Is it possible to embed jQuery Tabs onto one or more panels. Doing so tends to make one or the other effectively unusable.
@Brian jQueryUI tabs, or my tab plugin?
I’m working on a site that will have various forms on each of the panels. Some forms are larger than others but we don’t want to make the entire accordion the height of the worse case form. What I was hoping for is for some code, attached to the onActivate that could determine the panel that I’m on and set / reset the height of the accordion dynamically.
Any thoughts / suggestions?
First of all, thanks for the great plugin.Please if you can tell me why the accordion is not working in IE8.
The one on my site is not working, but i checked your demos and they have the same problem.
Here is the link : http:/www.madebym.net
p.s.
I am viewing this in developer tools on IE9 to simulate IE8, so maybe that is the problem.
@madebym If you re-enable the plugin on your site I’ll take a look for you
Hey Nikki – I’m not all too familiar with jQuery plugins, this will be a first for me. When you ‘call’ the function, eg.
$(‘#yourdiv’).liteAccordion();
I’m assuming it’s in the of the markup, right? I’m trying to get this beast of a slider to work but i’m not familiar with the call part of it. Any pointers/subtle hints would be appreciated!
@Mark yeah that’s right, you need to include jQuery and the accordion scripts, then call the plugin on the relevant dom node in another script tag. If you view source on the demo page and scroll to the bottom, that should give you a good idea of how it all works.
Nikki, I’m a pain in the *ss, apologies but, as before, I’ve solved my problem and the cause was exactly in the words I used to describe it so I’m adding this comment in case others have similar problems. The problem was because they both were able to work as standalones, they both had calls to jquery libraries and this was the conflict. Making sure the accordion page was the only one to have jquery library calls solved my problem.
I’ll go away and keep quite now, apologies and thanks.
Rog
@rog I’m sorry I couldn’t reply sooner, but I’m glad you got everything working in the end
Hi Nikki, download problems are behind me and I’ve basically got it working. I’m populating the slide-in panels and want one to contain a jquery photo slideshow which I’m acquiring by using a ‘PHP include’ within the appropriate div. The accordion and slideshow pages work fine as a stand alone pages but won’t work when called using PHP include within the accordion. Effectively neither the accordion nor the slideshow load. Any clues.
My thanks
Rog
Nikki, ignore my download problems, worked OK in Firefox so must be an IE issue on my PC.
Thanks
Rog
Hi Nikki, great work but sadly your download page isn’t working. I can’t download the .zip or tar.gz files.
My thanks
Rog
Thank you for sharing this great plugin!
A small correction on liteaccordion.jquery.js lines 87 and 88 – line 87 should be .height and line 88 should be .width. The version I just downloaded has those opposite and was causing havoc when I set the header width.
Thanks!
Alane
@alane Glad you like the plugin
Those lines are set that way because there’s a 2d transform on the tabs. So they’re not the wrong way round, it’s just a bit counter-intuitive if you want to change them. Thanks!
Any possibility to scroll longer text?
It would work great but if I need more text with images I couldn’t find an alternative..
@Jefferis You could put a scroll on the slide div in the CSS?
How do you get internal links to work? e.g if I wanted a link on the homepage, linking to page two? I have tried a name tags without any luck. Thanks in advance.
@jo It doesn’t have that option at the moment I’m afraid
great plugin! thanks for this.
actually this is the only horizontal accordion plugin out there that seems to work flawlessly and without usin’ too much resources
(though I would’ve chosen the jQuery UI one over this, but there still is only the vertical one available;)
before I start coding around your plugin/code.. can you suggest a good way of including jQuery easing into the options/settings of the accordion?
@Nico It shouldn’t be too hard to replace the default easing with custom easing, just look for the ‘animate’ lines in the plugin. Let me know how you get on
I am having a hard time getting this to work. I am a complete noob with coding, though. Am I supposed to upload the package to my server? What do I do after that?? I want this plugin to be displayed on my homepage.
Niccola,
First of all thanks for making such an awesome accordion plugin! I have successfully implemented the plugin in an app. But when I display the accordion inside of a modal dialog, I can’t check or uncheck the checkboxes that are in the slides. I was using jQuery UI 1.7 and it worked fine. I upgraded to 1.8 and it broke with the above behavior. To make a long story short, have you heard of any similar behavior with jUI 1.8?
Cheers,
@Jeff I’m afraid I haven’t heard of similar issues, maybe double check the z-indices of your form items? Sorry I cant be of more help.
@Matt I’ve had a look at your site in IE9, I can’t seem to replicate the issue you’re having
@brahim animation stops on mouseover, or if animation is disabled. Version two will have a method for you to stop the animation manually.