Lightweight jQuery Collapse Control Plugin - Collapsable

File Size: 21.8 KB
Views Total: 4202
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight jQuery Collapse Control Plugin - Collapsable

Collapsable is a very small, cross-browser jQuery content toggle plugin which allows you to expand and collapse whatever you want. Highly customizable, WAI ARIA compliant and very smooth.

Key features:

  • Custom animations for expanding/collapsing.
  • Custom trigger events.
  • Accordion mode which allows more than one expanded box in same time.

Basic usage:

1. Load jQuery library and the jQuery collapsable plugin at the end of the document.

<script src="//"></script>
<script src="dist/jquery.collapsable.js"></script>

2. Create a basic content toggle following the markup structure like this:

<div id="ca-1" class="collapsable example">
  <h2 class="ca-control">Collapsable with toggle</h2>
  <div class="ca-box">
    <p>Content here.</p>

3. Just call the function on the top container and you're done.

  // options here

4. Here's a list of default plugin options help you customize the content toggle control.


  // CSS selector for control element
  control: '.ca-control', 

  // CSS selector for hideable element (box)
  box: '.ca-box',         

  // event triggering the expand/collapse
  event: 'click',         

  // whether prevenDefault should be called when specified event occurs on control; even if false, e.collapsableEvent.preventDefault() may be used inside collapsable event handlers
  preventDefault: true,   

  // effect for expanding/collapsing, [ false | toggle | slide | fade | {Object} ]
  fx: null,               

  // duration of the effect, affects delay between `expand.collapsable`(`collapse.collapsable`) and `expanded.collapsable` (`collapsed.collapsable`) evetns are triggered; default value is 500 when fx set to slide
  fxDuration: 0,          

  // determines, if there could be more than one expanded box in same time; related to jQuery set on which initialized
  accordion: false,       

  // possibility of collapsing all boxes from set
  collapsableAll: true,   

  // external links for operating collapsable set, can be anywhere else in DOM
  extLinks: {            

    // CSS selector for external links; it has to be anchors; the click event is binded 
    selector: '',       

    // whether preventDefault is called on extLinks click
    preventDefault: false 

  // CSS class names to be used on collapsable box; they are added to element, on which collapsable has been called
  classNames: {            
    expanded: 'ca-expanded',
    collapsed: 'ca-collapsed',
    defaultExpanded: 'ca-default-expanded',
    extLinkActive: 'ca-ext-active'

5. Public methods available.

// collapses all items 

// this will also expand all items from set, even though it has been called only on one item

// collapses all items
$('.collapsable, .collapsable-2').collapsable('collapseAll');

// destroys collapsable and returns DOM to state prior to initialization



  • added control if hash in url is valid selector, eg. #_=_ is would cause jQuery to throw an error


  • when collapsable control anchor is present in HTML and its `href` attribute is `#`, then it is replaced with collapsable box id


  • fixed: default expanded box could have been ignored under certain circumstances


  • there could be more than one box per collapsable element, id's are suffixed with index of the box and aria-controls attribute is changed appropriately


  • fixed for jquery 3


  • fixed JS error when called on empty jQuery object with 'collapsableAll: false' set

This awesome jQuery plugin is developed by zipper. For more Advanced Usages, please check the demo page or visit the official website.