Blog

liteaccordion

liteAccordion v2

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/
Download: https://github.com/nikki/liteAccordion/


Version 2.2 (21/01/13)

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!

294 Comments

  • John Cardozo 3 months ago Reply

    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… ;)

    • nikki 3 months ago Reply

      Do you have a link I could look at?

  • Shane LeBlanc 3 months ago Reply

    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!

    • nikki 3 months ago Reply

      Do you have a link I could look at? Don’t mind helping out :)

  • Mhairi 4 months ago Reply

    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

  • marina 4 months ago Reply

    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

  • eddie A 4 months ago Reply

    Hi Nikki,
    I see the onmouseover as a new option but how do i add it? Thanks.

    • eddie A 4 months ago Reply

      nevermind, I found it. line 23 of the liteaccordion.jquery.js file for anyone else interested. otherwise you can delete these two comments. thanks.

    • nikki 4 months ago Reply

      Set it in the options object you pass to the plugin on instantiation ({ activateOn : ‘mouseover’ })

  • Nova 4 months ago Reply

    Hi Nikki,

    Can this plugin work with less or more than 5 slides?

    Thanks!

    • nikki 4 months ago Reply

      Yep, you can have as many slides as you want

  • moshe 4 months ago Reply

    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!

  • kikanshathomas 4 months ago Reply

    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 %?

    • nikki 4 months ago Reply

      It would take a lot of modification of the core…

  • Rich Gwozdz 4 months ago Reply

    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?

  • David Segura 4 months ago Reply

    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

  • JAvier 4 months ago Reply

    Hello Nikki, fantastic job.

    How I can call an event when displaying a slide?

    example: if (Id_slide == 1) {alert (‘Hello!’)}

    Thank you!

    • nikki 4 months ago Reply

      Use the callback functions

  • moshe 4 months ago Reply

    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

  • Melissa 4 months ago Reply

    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

  • David Segura 4 months ago Reply

    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?

    • nikki 4 months ago Reply

      Perhaps alter the left margin on the slide divs within the plugin file?

  • chris 4 months ago Reply

    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

    • nikki 4 months ago Reply

      I’m afraid not (it might look a bit odd?)

  • Adi Wibowo 4 months ago Reply

    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.

    • nikki 4 months ago Reply

      Do you have a demo I could look at?

  • marina 4 months ago Reply

    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!

    • nikki 4 months ago Reply

      Not from within the plugin, but something like:

      $(‘#yourdiv’).mouseleave(function() {
      $(this).find(‘.slide:eq(0) > h2′).click();
      });

      should work I think?

      • marina 4 months ago Reply

        thank you for answer
        didn’t work :(
        is an excellent accordion any way

      • marina 4 months ago Reply

        I made a mistake, is working!!! :)
        thank you very very much!

      • jeroen 4 months ago Reply

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

        • nikki 4 months ago Reply

          Is “demo” the id of your div? Plus you have a typo – containterWidth

  • Will 4 months ago Reply

    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.

    • nikki 4 months ago Reply

      I wouldn’t say an ‘easy’ way, but if you know enough JS you could modify the ‘linkable’ function?

  • masoud 4 months ago Reply

    hi nikki
    nice your work.
    how change direction to rtl ???
    for rtl website ?!
    tanks. good luck

    • nikki 4 months ago Reply

      Not supported I’m afraid! It wouldn’t take much JS knowledge to implement it though…

  • Karen 4 months ago Reply

    Hi! (: Is there any way to “configure” different title widths?

    • nikki 4 months ago Reply

      Yep, the headerWidth setting.

      • Karen 4 months ago Reply

        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.

        • nikki 4 months ago Reply

          Ah ok, you wouldn’t be able to do this ‘out of the box’ I’m afraid

  • marq104 4 months ago Reply

    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

    • nikki 4 months ago Reply

      Think you must have this plugin confused with something else, I only wrote this last year :)

  • RaMarcus 4 months ago Reply

    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.

  • Emil E 4 months ago Reply

    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

    • nikki 4 months ago Reply

      You’ll need to know a little bit of JS to customise the script to that extent…

  • Tiago Bahi 4 months ago Reply

    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

    • nikki 4 months ago Reply

      I’m afraid I’m pretty busy at the moment, perhaps a local freelancer would be able to help?

  • liz 4 months ago Reply

    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.

    • nikki 4 months ago Reply

      Remove the syntax highlighter scripts you copied from the demo page :)

  • Alex Jones 4 months ago Reply

    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!

    • nikki 4 months ago Reply

      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 {}.

  • Adam 4 months ago Reply

    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

    • nikki 4 months ago Reply

      Perhaps destroy/re-init the plugin onresize?

  • Housni 4 months ago Reply

    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.

    • nikki 4 months ago Reply

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

  • Dani Szwarc 4 months ago Reply

    Another question: is there any way to make the autoplay just to cycle once?

    • nikki 4 months ago Reply

      Not currently I’m afraid, you could rewrite the autoPlay function though if you know enough JS…

  • Dani Szwarc 4 months ago Reply

    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!

    • nikki 4 months ago Reply

      Tbh I’m not entirely sure what you mean? Could you send some screenshots please?

  • Siobhan 4 months ago Reply

    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!

    • nikki 4 months ago Reply

      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).

  • Siobhan 4 months ago Reply

    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,

    • nikki 4 months ago Reply

      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?

  • charlie 4 months ago Reply

    hi,

    have you considered making this into a plugin for wordpress?

    there are ones that do this but yours is way better.

    • nikki 4 months ago Reply

      As it happens I’m just finishing off the WordPress version. Watch this space :)

  • steph le plombier 4 months ago Reply

    nexous.click(function(){
    if( core.currentSlide 0)
    methods.prev();
    });

  • steph le plombier 4 months ago Reply

    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();
    });

  • steph le plombier 4 months ago Reply

    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.

  • intelwaveDev 4 months ago Reply

    the rounded corner doesn’t work in your demo. Hope you can find out why. Other than that, great work!

    • nikki 4 months ago Reply

      I’m assuming you’re viewing in IE? CSS rounded corners aren’t currently supported (by the browser) in IE.

  • erica 4 months ago Reply

    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

    • nikki 4 months ago Reply

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

  • Ricardo 4 months ago Reply

    ¿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();
    ….

    • nikki 4 months ago Reply

      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).

  • Jim 4 months ago Reply

    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.

    • nikki 4 months ago Reply

      Hi Jim, a screenshot would be great thanks. I’ll check it out in the meantime though (gogo gadget VMWare :p)

  • Manuel 4 months ago Reply

    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

    • nikki 4 months ago Reply

      Have you included a) jQuery core; b) liteaccordion css; c) liteaccordion js; in your page, and d) instantiated the plugin in your page?

  • Laurence 4 months ago Reply

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

  • francesci 4 months ago Reply

    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

    • nikki 4 months ago Reply

      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.

  • Nigel 4 months ago Reply

    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

    • nikki 4 months ago Reply

      Hi Nigel, thanks for pointing this out, I need to revise the documentation. To call a method, use $(‘#yourDiv’).liteAccordion(‘methodname’). Thanks!

  • Richard Haynes 4 months ago Reply

    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.

    • nikki 4 months ago Reply

      I honestly can’t imagine a scenario where you wouldn’t have a doctype :)

  • Michelle Lana 4 months ago Reply

    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?

    • nikki 4 months ago Reply

      Hi, it’s as I said below – call the JavaScript method for stopping the video in the onSlideAnimComplete callback function.

      • Steve 4 months ago Reply

        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…

  • Pierre 4 months ago Reply

    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!

    • nikki 4 months ago Reply

      Everything is up on Github :)

  • Warren 4 months ago Reply

    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

    • nikki 4 months ago Reply

      Fixed in v2.0.1, thanks :)

  • Hart 4 months ago Reply

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

  • Hart 4 months ago Reply

    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

    • nikki 4 months ago Reply

      This was fixed in v2.0.1. Thanks :)

Submit a Comment