Examples source codes

Basic usage

<div class="collapsable collapsable-basic">
  <h5 class="ca-control">Basic collapsable box</h5>
  <div class="ca-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-toggle">
  <h5 class="ca-control"><a href="#ca-1" class="ca-ico">Collapsable with toggle</a></h5>
  <div class="ca-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-slide">
  <h5 class="ca-control"><a href="https://github.com/zipper/jquery.collapsable" class="ca-ico">Sliding collapsable box</a></h5>
  <div class="ca-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>

$('.collapsable-basic').collapsable();

$('.collapsable-toggle').collapsable({
  fx: 'toggle'
});

$('.collapsable-slide').collapsable({
  fx: 'slide',
  fxDuration: 300
});

Accordion

$('.collapsable-grouped').collapsable({
  accordion: true,
  fx: 'slide',
  fxDuration: 300
});

Option collapsableAll

$('.collapsable-collapsableAll').collapsable({
  collapsableAll: false,
  fx: 'slide',
  fxDuration: 300
});

Examples of public methods

// 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');

// 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);