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

  • Richard 1 week ago Reply

    Thanks for writing this plugin, it has saved me a heap of time implementing a squished checkbox selection bar. This worked fantastically, but as soon as I have tried to implement bootstrap (simply adding the bootstrap sylesheet) it breaks as a gap appears to the left of the next h2 element. I have seen the github issue here: https://github.com/nikki/liteAccordion/issues/75, but did not understand your response there: “set the containerWidth to ’100%’”. I always want the bar to be a fixed width so I am not looking for any responsiveness. My js code is as follows:

    $(“#cat_selection”).liteAccordion({
    firstSlide: $(‘div#cat_selection>ol li’).length,
    containerWidth: 300,
    containerHeight: 32,
    headerWidth: 30,
    activateOn: “mouseover”
    });

    Do you know why this happens and does the ‘pro’ version solve this issue?

    Thanks.

    • nikki 6 days ago Reply

      A width of 100% will fill the parent container’s width – it will only resize if the parent element scales.

      Do you have a demo page I could see?

      • Richard 2 days ago Reply

        Thanks Nikki.

        I’ve put a demo up at http://richbits.github.io/accordion/ which hopefully shows the problem.

        On inspecting the page, it appears that with bootstrap, the div width is being set to 210px, whereas without, it is being set to 240px. The difference being the headerWidth. Beyond that, I’ve tried to step through your code, but I’ve not managed to establish how that width is being set.

        Thanks,
        Richard

        • nikki 2 days ago Reply

          Bootstrap is setting the box sizing for every element to border-box (which includes border and padding in the box model width calculation). Override it for the slide divs by setting { box-sizing: content-box }. This fixes it :)

          • Richard 23 hours ago

            Thanks Nikki, that seems to sort it. It is perfect for what I need now. :-)

  • Arvind 1 week ago Reply

    Excellent.
    Exactly what I was looking for.

  • Jawad 2 weeks ago Reply

    Can you please tell me if this accordion have function which can hold the slide function? I mean if I click on step 2, it first checks some condition. If its true, then it would expand, else there won’t be any change or an alert should be displayed. Can we accomplish this using liteaccordion-v2?

    • nikki 6 days ago Reply

      Not without rewriting some of the plugin’s code I’m afraid.

  • Miguel 5 weeks ago Reply

    Hi..

    It is possible to do my own accordion design to use with the scripts?…
    i just want something like this:

    http://www.molo.cl

    bars of solid colors with the same color background…
    any help will be apreciated
    thanks!

    • nikki 4 weeks ago Reply

      Yes, you could do something similar to that – with a reasonable command of CSS & JS, of course :)

  • Joel 9 weeks ago Reply

    Hi Nikki

    Thanks for creating this excellent slide. It’s the only one I could find that works well on iOS. All similar ones take you to the linked page as soon as you tap it, rather than opening the slide first.

    Anyhoo, is it possible to start with all slides closed? I have tried firstSlide : 0, but this doesn’t work

    Thanks in advance

    Joel

    • nikki 9 weeks ago Reply

      Only in the premium version I’m afraid. Sorry!

  • Cibin 12 weeks ago Reply

    Awesome plugin, gr8 job der :-)..

    Seems like if the first slide header is clicked twice ,then the onSlideAnimComplete function wont fire a second time. Not sure if this is the expected behaviour , But with other slides collapsing on a second click (except for the last one, in that case the function fires a second time though there is no visible animation ) this kinda stand out as a separate case where I have to write down some extra code :D .. just in case this aint expected or if I am missing something..

    • Cibin 6 weeks ago Reply

      Hi Nikki,

      I know the plugin doesnt offer work in IE10 running in IE8 document mode, But I am using the plugin in a sharepoint environment and I don’t think I will get to make any changes to the master page(though I am trying to) to correct the Doctype. Any directions on how to proceed on getting this fixed for IE10 running in IE8 document mode? and what do you think is that worth trying?

      Thanks in Advance,
      Cibin

      • nikki 6 weeks ago Reply

        IEx as IE[another version] is a real pain in the front-end (haha). It needs a lot of hacks for each version to display properly, but when you switch to IEx as IEx, you can get css for both versions applied to the page at the same time. As I said, nightmare.

        In theory you could take out the css for everything except IE8. Take a look at your page and make sure there’s an ie8 class on the accordion div before you do though.

  • Kedar Lasane 14 weeks ago Reply

    Does it support mobile device?
    If not how to make compatible to mobile device?

    • nikki 12 weeks ago Reply

      It isn’t responsive, but the premium version is.

  • Felix 19 weeks ago Reply

    Dear Nikki;

    I’m having a wee bit of a problem in that some of the functions of the myBB board I’m on won’t work with the accordion there. I tried adding [code]jQuery.noConflict();[/code] as a fix, but it disables the accordion. Any suggestions?

    Thanks!

    • nikki 15 weeks ago Reply

      Do you have a link I could have a look at?

  • tomtom 24 weeks ago Reply

    Hi,

    The accordion is not working.
    It is not loading like this other page content.
    (there are one index.html page and the other pages load in a “dynamicContent” class.)

    The consol error says “TypeError: $(…).liteAccordion is not a function” so it’s not helping.
    The website use bootstrap, maybe there are some conflict with other js script.

    Do you have any solution or advise ???

    Tks.

    • nikki 24 weeks ago Reply

      Have you included jQuery in your page?

  • Rimario 1 month ago Reply

    Would you like to use your gallery, but as there are explanatory codes and code assets, in addition to three examples, confused me.
    I would like to use your gallery with PHP, using the latest example of your page.

    http://nicolahibbert.com/demo/liteAccordion/demo-suite.html

    Could you help me?

    Since already thank you very much!

  • mustafa 1 month ago Reply

    Hi,
    Really well design, thanks for your efforts.
    I just wonder if I can modify this menu as percentage of the page instead of fixed px? I tried but i couldn’t successed. If give a feedback, I will be really greatful.

    • nikki 1 month ago Reply

      Try entering a percentage into the container width setting.

  • S 1 month ago Reply

    I’d like to make the content of the slides be images that pop out using jQuery dialog. Any idea why that wouldn’t work? I’ve tried both versions of the accordion.

    • nikki 1 month ago Reply

      Nope, that would work fine.

  • Nenad 1 month ago Reply

    Hey Nikki, great work! I play around with your Accordion and one thing i noticed the div’s with content are folded under other slide content. I try to achieve for each content div to be hidden, or width set to 0, until the header is clicked. Do you think this could be achieved easy ? :) Thanks

    • nikki 1 month ago Reply

      I think it’s possible if you set the firstSlide option to 0. Don’t quote me though :)

  • Maena 1 month ago Reply

    Hi, i can’t figure how to remove margin top, margin left and margin right, my image in the content is only center horizontally but trying to edit css the still have margins top & sides.
    I use the Light CSS version.

    see my issue : http://i37.servimg.com/u/f37/18/13/93/21/acco10.jpg

    • nikki 1 month ago Reply

      If you’ve copied the code directly from the demo page, you’ll need to remove the browser-default margin from the

      tag.
  • Bill Smith 1 month ago Reply

    Nikki, we just moved a website from an IIs 6 server to an IIs 7.5, now it is messed up when viewed in IE 7. Do you have any idea why this could be?

    Bill

    • nikki 1 month ago Reply

      The server you’re hosting on shouldn’t make any difference at all, this is purely a client side script.

  • Harry 1 month ago Reply

    Hi,

    How can we do a callback when we click a certain slide? We wanted the callback to function on one slide only. Hope you can help.

    Thanks. ;)

    • nikki 1 month ago Reply

      Something like:

      $(‘#accordion’).find(‘li:eq(1) > h2′).on(‘click’, function() {
      // callback
      });

  • Michael DeMutis 1 month ago Reply

    I have a click event for a form, that submits when the radio button is clicked. It selects then submits the form.

    I need to trigger the next slide after the click.. how do I call the method? Thank you.

  • Jeff 1 month ago Reply

    Hello
    Im getting a javascript error:
    Uncaught TypeError: Object [object Object] has no method ‘on’

    The slides do not move when clicked.
    Thanks!

    • nikki 1 month ago Reply

      This plugin requires jQuery 1.7+ to work – update the version of jQuery that you’re using.

  • Joshua 2 months ago Reply

    nikki,

    I am trying to use your accordion on an internal website for my company. The accordion works great but I can’t seem to change the container size. I followed the instructions on your demo site and even went and changed the defaults in your JS script but that didn’t work either. Any ideas? BTW, I have asp:tables within a formview for each li. Perhaps that is causing the issue?

    Joshua

    • nikki 2 months ago Reply

      If your formview has some css provided for it, it could be that it’s overriding the accordion styles. If you use your browser’s developer tools to inspect the li’s, you’ll be able to discover if this is the case.

  • Justin 2 months ago Reply

    Nikki – question on the accordion…when you close a slide, the URL still thinks it’s on that page and therefore makes the side navigation not work…what am I doing wrong?

    for example, if you can go to my staging site that I listed above, if you open ‘Weddings’ via the side nav or the clicking the slide itself, then close it, you can see the url stays at “…#two” …

    any help would be awesome!

    Justin

    • nikki 2 months ago Reply

      You’re not doing anything wrong! I think that’s a logic error on my part – it’s updating the hash with the last activated slide, rather than the currently visible one. I’ll pop it on my todo list :)

  • Andrew 2 months ago Reply

    Dear Nikki,

    I found some CSS elements as “element.style” which style the div container. Over whic .js can I find it?

    Thanks!

    • nikki 2 months ago Reply

      Hiya – sorry, not entirely sure what you mean?

  • BB 2 months ago Reply

    I love light accordion!
    However, I’m trying to use it on the same page with JQuery Superbox! http://pierrebertet.net/projects/jquery_superbox/

    They use different versions of the jquery.min.js lib.

    light accordion uses :

    superbox! uses:

    I can’t get both working at the same time. Any ideas?
    I tried adding:

    var j$1 = $.noConflict(true);

    But that breaks my accordion. :(

    Help please.

    • nikki 2 months ago Reply

      Hello! My plugin needs jQuery v1.7+ – all events are bound with $.on (which is jQ 1.7 upwards). Superbox looks like it *requires* jQuery v.1.3 (which is ancient!), but the author notes that the plugin is deprecated. Perhaps check Github to see if there are any community forks keeping the plugin up to date?

  • Leandro Actis 2 months ago Reply

    Hi Nikki.

    First I want to congratulate you for this excellent slide. But I have a question regarding how to use the stop method. I wanted to put a play and stop button … How do I put a link to it to stop and start?

    Thanks! ;)

    • nikki 2 months ago Reply

      You’d create your button as normal, then create a click handler for the button, and put the play or stop method inside the click handler.

  • Justin 2 months ago Reply

    Nikki – more kudos…this is a great tool…1 question…using the nav/linkable option…it works great to open the slides…but is there a way to close the slides from the same #/nav link

    my dev site is here: http://jmstaging.com/TCR

    I know you mentioned you’d be taking a hiatus on this, but if you could help on this, it would be so awesome!

    Thanks,
    JM

    • nikki 2 months ago Reply

      I don’t think that would be an easy thing to accomplish! You can’t do that with the plugin as it stands, and I’m afraid I don’t have the time to do it for you. Perhaps a local freelancer could help you?

  • Janardhan 2 months ago Reply

    Hi, I wondered If you can let me know how to enable scroll bars inside the accordion, Did tried with CSS overflow property and did tried with the container controls by making scrol true, however it is not reflecting, seems like the scroll bars are override by the liteaccordion CSS.

    • nikki 2 months ago Reply

      Set { overflow-y : scroll } on the div element.

  • Amelia 2 months ago Reply

    Hi Nikki.

    I know your not accepting support queries on this anymore but I’m having an issue I’m struggling to solve. I’m using your accordion (and it’s working lovely) however I’ve set up linkable slides. These work great, but if I go to say the contact page or site map and click on the navigation to say website.com/#slide3 it just shows the homepage on slide1 not the homepage on #slide3.

    Is there any way of getting this to work or is it unfixable? I feel a bit like i’m going in circles with it and need to inform the client.

    Any help would be really appreciated! :)

    • nikki 2 months ago Reply

      Hiya!

      Change line 190:
      $(window).on(‘hashchange.liteAccordion’, function(e) {

      to:
      $(window).on(‘load.liteAccordion hashchange.liteAccordion’, function(e) {

      this will navigate to slides on load :)

      • Amelia 2 months ago Reply

        Thank you. You’re a star!

  • Heitor 2 months ago Reply

    Hello Nikki,

    You did a great job! Congrats! I have a question: How do I perform a validation to allow the user to go to another slide? I have no skills in jQuery. My intention is to make a CRUD within the accordion. Slide 1: Insert the name, Slide 2: Insert the email, etc. How I block the user to go to other sliders if he doesn’t finished the earlier step? Is there a way to do this?

    One more time: the accordion is fantastic!

    • nikki 2 months ago Reply

      Interesting use case. Hmm. I think firstly you’d have to unbind click activation within the plugin. Then, on successful validation of the input (my earlier tutorials on form validation might be helpful here) you’d trigger the next slide using the next() method.

      Hope this helps :)

  • Roney 2 months ago Reply

    after a while the flaps not working in firefox, I click on the other tabs but remains just that crashed in, sorry for the mistakes I do not speak English

    • nikki 2 months ago Reply

      Do you have a link to the site demonstrating this behaviour?

  • mark gibson 2 months ago Reply

    never mind figured it out
    i was testing it with just the 1st slide fleshed out
    once i put in stuff in the 2nd slide the 1st slide got drawn over/pushed away
    thanks again for great tool

  • mark gibson 2 months ago Reply

    hi nikki – great tool – love it.
    im sure im missing something basic – sorry for simple question
    but my text inside slide is not slidiing out with slide but staying put
    what am i missing?
    i tried to imitate everything in your source
    thanks for your help – mark

  • Tony Tong 2 months ago Reply

    Hi,
    Very thanks for providing such a nice slider.

  • Geoff 2 months ago Reply

    Hey Nikki,

    You did some amazing work here, and I think the slider looks fantastic. I have it incorporated in my project right now, and it is perfect. Thank you so much for sharing this.

    I am wondering if it is possible to alter the size of the first panel only? I have been playing around and I can’t seem to do this, just wondering if it would be possible.

    Thanks again, and great work!

    Geoff

    • nikki 2 months ago Reply

      Hey Geoff,

      You can’t alter the size of individual panels I’m afraid – not without a huge JS re-write in any case. Glad you like the plugin :)

      Cheers,
      Nikki.

      • Geoff 2 months ago Reply

        Hi again,

        Yeah I thought that was the case. I might try to alter the JS at some point, but for now I am just thrilled to have this plugin. Keep up the great work.

        Cheers,

        Geoff

  • Srinivas Gowda 2 months ago Reply

    Awesome piece of work ma lady. I owe you a coffee for this, too bad we ain’t from the same place.

  • Shyamli 2 months ago Reply

    Hi,

    Thanks for providing such a nice slider.

    But, I have facing some issue in IE8 and IE9 (compatibility view on). The problem is that the h:over effect (pointer and the click effect) is only working when clicked on top most area. The click is not working when clicked in lower side of the column (like it works in FF) .

    The example hosted on your site also showing same problem when viewed on IE8 and IE9 (compatibility view on)

    Please help.

      • Shyamli 2 months ago Reply

        Thanks for your reply Nikki.
        But, I even checked the site example on IE 8, still the hover is not coming all over the vertical bar…when I am moving down the bar the hover is disappearing.

        If I am not bale to solve this issue then may be I have to search some other jQuery script.. :(

        Please try once at your end.

        Thanks

        • nikki 2 months ago Reply

          It won’t work with compatibility mode turned on.

  • Rino 2 months ago Reply

    Beautiful work :)

  • Logan 2 months ago Reply

    I can’t seem to get the slides to do anything. They won’t animate when I hover or click, although they do display correctly in their “closed” position on page load.

    They just don’t seem to want to open and my content divs are like 194×949 px in size…

    Any advice?

    • nikki 2 months ago Reply

      There isn’t a ‘closed’ position with this plugin. What does your error console say?

  • Keith 2 months ago Reply

    I am guessing this has some issues with the Mobile platform. I have tested on my Galaxy S2 Skryrocket and HTC Inspire with no success. The Bars align to the top instead of rotating. The navigation is still there, but the positioning is no bueno.

    Anyone have the same problem or know of the fix.

    I did test the demo site as well with no luck

    • nikki 2 months ago Reply

      Hah, the mobile ‘platform’. Don’t get me started on that. If you test on an iOS device, it works fine. Test on Chrome, Firefox, Dolphin, whatever – on Android – works fine. Test on the stock android browser… well, it’s anyone’s guess. I’ve had a lot of dealings with the stock browser on various different versions of Android. It’s the single worst browser out of any I’ve had to deal with, including IE5.5. At least IE bugs are predictable, and replicate-able. Just thinking about it makes me angry :/

      • Keith 2 months ago Reply

        Yeah I can imagine its in pain, I did find that non stock androids work as well as IOS. So I will deal.

        My new problem is the hash linkable slides. Maybe I am a blur on missing something but I can’t seem to make it happen

        Main Page
        http://turningpointrenovations.com/contact/default.html

  • Kedar 2 months ago Reply

    Thanks God, I found expected plugin for my new Project

  • Philip 2 months ago Reply

    Is there a way to open a particular slide by calling a method? I don’t see a documented method for that. Is there an undocumented method that will accomplish that?

  • Darryl Crum 2 months ago Reply

    Hi,
    I am having some problems getting the bullet list in my DW6CS6 file to show up indented in liteaccordion panels. The are there but they are not indented. Any help would be appreciated.

    Regards,
    Darryl

    • nikki 2 months ago Reply

      Sounds like the list items within your slides are being overridden by the styles used for the slides themselves. Something like #accordion li > div li { list-style-type: disc } should fix it.

  • Jose 2 months ago Reply

    When i am moving through slides, blurring occurs in slide panes…Its visible in your demo page also. Pls provide a solution for this problem.

    • nikki 2 months ago Reply

      Browser?

    • ernie macho camacho 24 weeks ago Reply

      ive figured it out.
      how bout you rewrite the accordion and remove the blur yourself?
      sounds like a plan to me, so go DIY…

  • Adriana 2 months ago Reply

    Hi Nikki, first of all, sorry about my bad english…but i’ll try anyway ;)
    Last year i used this site to help me on a website project [http://www.juliabosco.com.br/tempo] and it was working until this month :(
    I thought it could be some wrong update i’ve made, but as i have some backups in my external drive, four to be precise (january 12, april 12, july 12, october 12). I’ve tried to use them all – but unfortunatelly nothing works anymore. The good part of this: it was not a update i’ve made recently. The worst part: i can’t understand what is going on!
    The first thing i thought was that some of those *.js files has changed. I downloaded them, and nothing happens! Even the “index.html” that is in the folder “test” of the “liteAccordion-master” is not working too.
    I’d be very happy if you could help me, again ;)
    Thank you.

    • nikki 2 months ago Reply

      You have a lot of javascript errors on your page, that could be causing it?

      • Adriana 2 months ago Reply

        I noticed – not using my “skills level zero”, but using Safari Developer Tools ;)
        But the mystery is why it was working fine until last week, although the errors of javascript were there since last year. I was really betting on an update of js files due to some change of the browsers…as i said before, even https://github.com/nikki/liteAccordion/blob/master/test/index.html is not working.
        Well, I have no choice, i’ll keep looking, and looking… but thank you a lot! No doubt that It was good while it lasted – and will be awesome when i get this site working again.

        • nikki 2 months ago Reply

          Your version of jQuery is really out of date (1.4.2), and your version of the plugin is fairly old. Grabbing new copies of each should fix your problem.

          And you need a copy of QUnit to run the tests in the /test folder :)

          Hope this helps!

          • Adriana 2 months ago

            I got all the files i could find at your link “download”- i’ve got the ZIP file and nothing works yet!
            I’m getting crazy! It’s really a mystery as i said :( Ok there is a lot of errors, old version of this and that, but it was ok until last december! It’s really weird!
            How a backup that was working (and that is why i’ve made the backup) just stops! Sorry, i know that you can’t do my job, but as i’m all alone doing this, i need to share… near fifties, just trying to keep ok my blood pressure ;)

          • nikki 2 months ago

            Best advice I can give you is to go through the walkthrough http://nicolahibbert.com/demo/liteAccordion/ and make sure you’ve got the latest version of jQuery. Hope that helps!

  • tina 2 months ago Reply

    Hi Nikki,

    Is liteaccordion using jquery-ui version 1.9.x or 1.8.x? I couldn’t tell looking at github. I’m upgrading to 1.9.x and hoping I won’t break my use of liteaccordion. Currently, 1.9 is still backward compatible to 1.8. But, with jquery-ui 1.10 already a release candidate and they plan to deprecate 1.8 completely. Do you plan to do anything with compatibility to 1.9.x then 1.10?

    • nikki 2 months ago Reply

      Hey Tina,

      This plugin doesn’t use jQuery UI, so nothing to worry about :)

  • hossein mehrabadi 2 months ago Reply

    hi,
    How the rtl right? im need :(

    • nikki 2 months ago Reply

      Regrettably I won’t be implementing RTL in the foreseeable future. If anyone wants to take this task on, I’d happily check over your code and merge it into the master branch.

  • RD 2 months ago Reply

    Looking forward to see the implementation of the RTL func through this plugin…

Submit a Comment