Main features

• Lightweight (~2.2kB minified & gzipped version), yet robust (lot of options)
• No dependencies
• WAI ARIA compliant

Installation and usage

$ npm install collapsable.js --save

import Collapsable from 'collapsable.js'

new Collapsable(document.querySelector('.js-collapsable'))

Examples

<div class="collapsable collapsable-basic">
	<h4 class="js-collapsable__control"><i class="js-collapsable__icon" aria-hidden="true"></i> Basic collapsable box</h4>
	<div class="js-collapsable__box">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia lorem sit amet elit ullamcorper hendrerit. Pellentesque rhoncus eget sem in varius. Nulla congue lectus sed leo scelerisque scelerisque. Cras iaculis pulvinar velit. Proin ac lectus at elit tristique rhoncus. In pellentesque blandit feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean at dictum purus. Sed non fringilla dolor.</p>
	</div>
</div>

<div id="ca-1" class="collapsable collapsable-basic">
	<h4 class="js-collapsable__control"><a href="#ca-1"><i class="js-collapsable__icon" aria-hidden="true"></i> Basic collapsable box #2</a></h4>
	<div class="js-collapsable__box">
		<p>Nulla sit amet euismod nulla. Nunc tincidunt lectus eget felis volutpat, non scelerisque erat ornare. Phasellus vehicula ex eu tincidunt sodales. In hac habitasse platea dictumst. Donec tincidunt malesuada mi, vel sagittis arcu facilisis eget. Nam arcu ipsum, cursus sit amet purus vel, aliquet elementum dui. Nulla ultrices pulvinar velit, sit amet egestas est varius sed. Etiam tempor ex non porta porta. In interdum blandit urna ac vulputate. Nam facilisis arcu congue, fermentum enim vel, blandit mauris. Donec consectetur luctus volutpat.</p>
	</div>
</div>

<div id="ca-2" class="collapsable collapsable-basic">
	<h4><a href="https://github.com/zipper/collapsable.js" class="js-collapsable__control">Basic collapsable box #3</a></h4>
	<div class="js-collapsable__box">
		<p>Curabitur sed orci at elit euismod euismod et ac sem. Phasellus mattis arcu vitae dapibus sagittis. Mauris sit amet dictum velit, vitae venenatis lectus. Donec velit nisi, laoreet vel risus iaculis, maximus cursus sem. Suspendisse potenti. Nulla molestie purus sit amet lectus varius consequat ac ut neque. Donec eu tincidunt ex. Maecenas cursus semper ex finibus eleifend. Nullam erat neque, elementum ac egestas sit amet, porttitor eget sem.</p>
	</div>
</div>

const collapsableBasic = document.querySelectorAll('.collapsable-basic');
new Collapsable(collapsableBasic);

const collapsableAccordion = document.querySelectorAll('.collapsable-accordion');
new Collapsable(collapsableAccordion, {
	accordion: true
});

const collapsableCollapsableAll = document.querySelectorAll('.collapsable-collapsableAll')
new Collapsable(collapsableCollapsableAll, {
	collapsableAll: false
});

Options

Plugin exports type CollapsableOptions which is used for options.

Events

Old documentation for 2.0.8! Information down there are still somewhat correct, but with slightly different syntax.

Events triggered by plugin itself

Since version 2.0.0, there is no possibility to pass callback functions via options. Instead, you may bind handlers to events which are triggered by plugin. All events are namespaced (collapsable). In table below, there are all events which might be triggered by plugin. In all events, this refers to collapsable box from initial set.

Possible events passed in e.collapsableEvent

Each event from above may contain property collapsableEvent. This allows you to distinguish actions that led to expansion or collapse of the box, eg. if this expands by user click or any other way. Possible events stored in are in table below. Additionally, when data has been passed to event (eg. by calling .collapsable('collapseAll', data)), property customData is set in event.

Public methods

After initialization, you may use a few public methods defined on carousel. There are three public methods defined, expandAll, collapseAll and destroy which will return the DOM into state prior to initialization. All methods might be called on any collapsable item (in that case, the initial set is found), whole set or even multiple sets.

// collapses all items from set $('.collapsable')
$('.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 from set $('.collapsable') and from $('.collapsable-2')
$('.collapsable, .collapsable-2').collapsable('collapseAll');

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

There is a data set on each item containing JS Object. You may retrieve it and then use some other functions defined on objects itself. See example below.

// get the instance of CollapsableItem object
var item = $('.collapsable').eq(0).data('collapsable');

/**
 * Expand this item, arguments of function call are
 * @param event - event passed to handler of triggered events (expand.collapsable, ...)
 * @param data	- data passed to event, accessible in event.customData
 * @param force - boolean for expanding item regardless of event.preventDefault call in expand.collapsable handler
 * @returns Boolean - if the item has or has not been expanded
 */
item.expand(event, data, force);

// Collapse the item, analogical to above
item.collapse(event, data, force)

// instance of Collapsable object, contains array items, where there are all items as CollapsableItem
var set = item.parent;

// Expands all items of set, data are passed expand.collapsable handler in e.customData
set.expandAll(data);

// Analogical, but collapses all items
set.collapseAll(data);

Changelog

2.0.8

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

2.0.7

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

2.0.6

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

2.0.5

• 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

2.0.4

• fixes #10 (empty hash # in url causes JS error in jQuery 3 when used as selector $('#'))

2.0.3

• fixed JS error when called on empty jQuery object with collapsableAll: false set - fixes #7
• items are properly collapsed on initialization when combination of collapsableAll and accordion is used - fixes #8

2.0.2

• renamed property originalEvent to collapsableEvent, so preventDefault called on expand.collapsable or collapse.collapsable event doesn't prevent that custom event as well

2.0.1

• renamed option grouped to more recognizable accordion
• changed default fx value to null for no effect used
• changed order of executing fx function and class assigning so it doesn't interfere with jQuery effects
• default value of extLinks.selector to empty string ''
• move class name option for active external links into classNames
• destroy function now actually works properly :) some optimizations were done to destroy method apart from making it work
• when destroy is called, aria attributes are removed as well - #6
• isExpanded is not a method anymore
• bugfix of not binding event on control element if it is anchor

2.0.0

• plugin has been completely rewritten