jQuery Collapsible Plugin

Posted by on Mar 10, 2010 in jQuery, Projects | 27 comments

jQuery Collapsible Plugin

jQuery Collapsible Plugin

This jQuery plugin provides collapsible panels anywhere you want.  It also has cookie support built in,  is fully customizable, and works with all modern browsers.  This is a great plugin for site navigation, faqs, and etc.

27 Responses to “jQuery Collapsible Plugin”

  1. great plugin! this is one the only simple, no-frills accordion plugin I have found that works right out of the box with what I am doing.


  2. John Snyder says:

    Thanks, I tried to make it as flexible as possible, let me know if you have any questions or suggested improvements.

  3. thank you for this plugin! but how can I check on click, if a block is collaped or not?
    like “if x is collapsed show me y”.
    thank you in advance!

  4. John Snyder says:

    There are functions that were contributed that enable this, and it is in the readme:

    You can call following methods on collapsible elements:
    * collapsed – returns ‘true’ if element is collapsed
    * toggle – toggle collapsible state
    * open – open a collapsible
    * close – close a collapsible

    Call them using jquery-ui style:
    $(selector).collapsible('method', [arg]);
    if ( $('#nav-block').collapsible('collapsed') ) { ... }

  5. Hi,
    This is a great plugin, but I found a problem that I can not solve by myself.

    What works:
    Collapsible can contain a flot chart. It can hide and show it.

    What doesn’t work:
    If Collapsible is closed when reloading page, a flot chart is not displayed after Collapsible is opened.

    Please help!

  6. John Snyder says:

    Martins, do you have a link so I can see the issue first hand? You can send it via contact form or comment, otherwise I don’t know enough to help.

  7. First of all I would like to thank you for the plugin and as you discovered it’s probably the only one of it’s kind or there are others out there that simply do not work without some issue or another and lord knows I have tried them ALL over the past 10 days so kudos to you for your work.

    Now onto my question which is probably rather simple but I would like to use the slideFadeToggle function found on this page. http://www.learningjquery.com/2008/02/simple-effects-plugins as the animation effect when opening / closing my divs and was wondering where I would need to add the function to your code so I could do this. If this allowed per your license agreement that is.

    Anyway this is the slideFadeToggle function I am talking about.

    jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: ‘toggle’, height: ‘toggle’}, speed, easing, callback);

    Thanks Again,

    • John Snyder says:

      At the time I wrote it, I hadn’t really given much thought to the effect, other than its speed. You should be able to edit the plugin to get it working. The two places you’d have to edit are here:

      // Hides a collapsible
      function close($this, opts) {
      //give the proper class to the heading
      //still here, close an open item
      $this.next().slideUp(opts.speed); //no animation as its a page load initalization
      //return false; //just incase its a link, lets not let it fire off
      //do cookies if plugin available
      if (useCookies(opts)) {
      // split the cookieOpen string by ","
      id = $this.attr('id');
      unsetCookieId(id, opts);
      // Opens a collapsible
      function open($this, opts) {
      //do cookies if plugin available
      if (useCookies(opts)) {
      // split the cookieOpen string by ","
      id = $this.attr('id');
      appendCookie(id, opts);

      In these blocks you will find the standard slideUp and slideDown, just replace those and it should work. I’ll look into adding the ability to replace the effect via config option in a week or so.

  8. Thanks for the quick reply John and I tried various methods to get this to work but did not succeed so I will just wait until it’s implemented into the plugin itself and no rush on that btw great job once again for the nice plugin.


    • John Snyder says:

      Ok, if you wanna give it a shot, download the raw version here: http://github.com/juven14/Collapsible/raw/master/jQuery.Collapsible.js

      Do a find/replace as follows:


      replace with:
      $this.next().animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback)


      replace with:
      $this.next().animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback)

      You’ll have to hard code the options such as speed, easing callback. I’ll get to adding something like this that is configurable, but it will be at the very least 1 week.

    • John Snyder says:


      I’ve added this to the plugin, you can replace the default slideUp/slideDown with a callback in the options. See here: Demo – custom animation

  9. Hi John,
    great plugin. Is there a way to open/close all collapsibles at once?


    • John Snyder says:

      Sure, just use the method as explained in the readme:


      • Hi John,
        thanks for your reply. I tried that. I am using ‘open’ from within a javascript-function that is called by a button’s onclick as in my code below. But that doesn’t open the collapsibles. Instead when clicking on the collapsibles they get open and close immediately. What am I doing wrong?

        $(document).ready(function() {

        cssClose: ‘collapse-close’,
        cssOpen: ‘collapse-open’,
        cookieName: ‘collapsible’,
        cookieOptions: {
        path: ‘/’,
        expires: 7,
        domain: ”,
        secure: ”
        defaultOpen: ”,
        speed: 300,
        bind: ‘click’

        // Function called by a button on the page
        function openAll() {

    • Hi John,

      Love the plugin.

      Is there a way to auto-close any open tabs, when a new tab is clicked on? (ie. open the new tab and close any open tabs)

      I am not much of a coder, so any help you can provide would be great.


      • John Snyder says:

        Luke, do you mean that you want to make it an accordion? When any tab gets opened, every other tab gets closed? Or are you wanting to do it for a specific tab only?

        • Hi John,

          Thank you for your reply.

          Yes, I would like to make it like an accordion. (Purely as the website I am working on has limited vertical space available.)

          If you could let me know the code to make this happen that would be greatly appreciated.


          • John Snyder says:

            This plugin wouldn’t be the most efficient accordion since it was never really designed to be one. There are a lot of accordion specific plugins, some that even do collapsibles. If you want I can make an accordion version of this plugin, I made it work here: http://www.snyderplace.com/demos/accordion.html Please note, this was done very fast and isn’t a perfect solution, specifically on attempting to close the open item and accordion specific options like the variations found in the other accordion scripts.

          • Hey John,

            Thanks for this.

            Works fine in Firefox on Mac. Will see if it works in other browsers/systems too.


          • Hi John,

            Thank you for your efforts in making this hack.

            I notice that when clicking on a menu whose sub-menu is out, that it does not bring it in and stay in (but pops back out to it’s original state).

            I understand that this script was not intended specifically for this, but if you are able to update this easily enough, it would be fantastic.


          • John Snyder says:


            I made a quick replacement at the same link, I removed all the code that was not necessary for an accordion, and did some styling to the demo which I also applied to the accordion. Do you want them to be able to close all items? By default 1 must be open, but I could probably change this. It works in FF for OSX but that is as far as I could go today.

  10. Hi,

    How to get you use the cookie plugin to save the state of the open and closed elements?

    The plugins developers site is down so I’m coming up with nothing :(

    Thanks in advance!

  11. No solution?

    • John Snyder says:

      Just set you cookie settings in the plugin options, be sure you remember to link to the cookie script, it will check if its available and use it if you have it setup in the plugin options:

      cookieName: 'collapsible',
      cookieOptions: {
      path: '/',
      expires: 7,
      domain: '',
      secure: ''

      See here (source as well): http://www.snyderplace.com/demos/collapsible.html

  12. Very nice work.

    How to make the elements close on mouseout?