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="//code.jquery.com/jquery-1.12.1.min.js"></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>
  </div>
</div>

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

$('.example').collapsable({
  // options here
});

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

$('.example').collapsable({

  // 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 
$('.collapsable').collapsable('expandAll');

// this will also expand all items from set, even though it has been called only on one item
$('.collapsable').get(0).collapsable('expandAll');

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

// destroys collapsable and returns DOM to state prior to initialization
$('.collapsable').collapsable('destroy');

Changelog:

2019-02-13

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

2018-01-23

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

2017-08-04

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

2017-07-27

• 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

2016-09-14

• fixed for jquery 3

2016-04-17

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