Collapse collapse.js

Get base styles and flexible support for toggling content on your page.

Contents

Examples

Click the buttons below to show and hide another element via class changes.

Basic

Fusce vel posuere nulla. Cras urna enim, tristique a diam quis, suscipit euismod ante. Praesent fringilla tincidunt augue facilisis condimentum. Nam eget congue nisl. Sed hendrerit, arcu convallis gravida scelerisque, purus lectus scelerisque enim, nec gravida sapien diam eget sem.

<button type="button" class="btn btn-outline-primary" data-cfw="collapse" data-cfw-collapse-target="#collapseEx1">Collapse <span class="caret"></span></button>
<div id="collapseEx1" class="collapse">
    <p>Fusce vel posuere nulla. Cras urna enim, tristique a diam quis, suscipit euismod ante. Praesent fringilla tincidunt augue facilisis condimentum. Nam eget congue nisl. Sed hendrerit, arcu convallis gravida scelerisque, purus lectus scelerisque enim, nec gravida sapien diam eget sem.</p>
</div>

Multiple Triggers

You can assign multiple triggers to control one collapse target. It is required to use either the data-cfw-collapse-target or href attributes in order for all the control triggers, and target states to become synchronised.

Trigger 1

Fusce vel posuere nulla. Cras urna enim, tristique a diam quis, suscipit euismod ante. Praesent fringilla tincidunt augue facilisis condimentum. Nam eget congue nisl. Sed hendrerit, arcu convallis gravida scelerisque, purus lectus scelerisque enim, nec gravida sapien diam eget sem. In sed sem et diam condimentum malesuada? Nam cursus venenatis posuere. Praesent id purus turpis. Curabitur pretium arcu nec diam interdum, id elementum sapien ultricies. Fusce ornare magna et risus rhoncus; eu consectetur sem vulputate.

<a href="#" role="button" class="btn btn-outline-primary" data-cfw="collapse" data-cfw-collapse-target="#multi-collapse">Trigger 1 <span class="caret"></span></a>
<button type="button" class="btn btn-outline-primary" data-cfw="collapse" data-cfw-collapse-target="#multi-collapse">Trigger 2 <span class="caret"></span></button>
<div id="multi-collapse">
    <p>Fusce vel posuere nulla. Cras urna enim, tristique a diam quis, suscipit euismod ante. Praesent fringilla tincidunt augue facilisis condimentum. Nam eget congue nisl. Sed hendrerit, arcu convallis gravida scelerisque, purus lectus scelerisque enim, nec gravida sapien diam eget sem. In sed sem et diam condimentum malesuada? Nam cursus venenatis posuere. Praesent id purus turpis. Curabitur pretium arcu nec diam interdum, id elementum sapien ultricies. Fusce ornare magna et risus rhoncus; eu consectetur sem vulputate.</p>
</div>

Using id and matching href attributes.

ID Trigger 1 ID Trigger 2

Fusce vel posuere nulla. Cras urna enim, tristique a diam quis, suscipit euismod ante. Praesent fringilla tincidunt augue facilisis condimentum. Nam eget congue nisl. Sed hendrerit, arcu convallis gravida scelerisque, purus lectus scelerisque enim, nec gravida sapien diam eget sem. In sed sem et diam condimentum malesuada? Nam cursus venenatis posuere. Praesent id purus turpis. Curabitur pretium arcu nec diam interdum, id elementum sapien ultricies. Fusce ornare magna et risus rhoncus; eu consectetur sem vulputate.

<a href="#href-collapse" role="button" class="btn btn-outline-primary" data-cfw="collapse">ID Trigger 1 <span class="caret"></span></a>
<a href="#href-collapse" role="button" class="btn btn-outline-primary" data-cfw="collapse">ID Trigger 2 <span class="caret"></span></a>
<div id="href-collapse" class="collapse">
    <p>Fusce vel posuere nulla. Cras urna enim, tristique a diam quis, suscipit euismod ante. Praesent fringilla tincidunt augue facilisis condimentum. Nam eget congue nisl. Sed hendrerit, arcu convallis gravida scelerisque, purus lectus scelerisque enim, nec gravida sapien diam eget sem. In sed sem et diam condimentum malesuada? Nam cursus venenatis posuere. Praesent id purus turpis. Curabitur pretium arcu nec diam interdum, id elementum sapien ultricies. Fusce ornare magna et risus rhoncus; eu consectetur sem vulputate.</p>
</div>

Horizonal

A horizontal variant of a collapse can be invoked by placing a class of width on the collapse target, or by using the data attribute data-cfw-collapse-horizontal="true" on the trigger. A child container with a fixed dimension width (not a percentage) is needed for proper animation.

Fusce vel posuere nulla. Cras urna enim, tristique a diam quis, suscipit euismod ante. Praesent fringilla tincidunt augue facilisis condimentum. Nam eget congue nisl. Sed hendrerit, arcu convallis gravida scelerisque, purus lectus scelerisque enim, nec gravida sapien diam eget sem.

<button type="button" class="btn btn-outline-primary" data-cfw="collapse" data-cfw-collapse-target="#collapseEx2" data-cfw-collapse-horizontal="true">Collapse <span class="caret"></span></button>
<div id="collapseEx2" class="collapse width">
    <div style="width: 20em">
        <p>Fusce vel posuere nulla. Cras urna enim, tristique a diam quis, suscipit euismod ante. Praesent fringilla tincidunt augue facilisis condimentum. Nam eget congue nisl. Sed hendrerit, arcu convallis gravida scelerisque, purus lectus scelerisque enim, nec gravida sapien diam eget sem.</p>
    </div>
</div>

Usage

The collapse widget utilizes a few classes to handle the heavy lifting:

  • .collapse hides the content
  • .collapse.in shows the content
  • .collapsing is added when the transition starts, and removed when it finishes
  • .collapsing.width uses the horizontal transition instead of the default vertical transition

These classes can be found in _animation.scss.

Via Data Attributes

Add data-cfw="collapse" and a target selector through a data-cfw-collapse-target or href attribute to automatically assign control of a collapsible element. Be sure to add the class collapse to the collapsible element. If you’d like it to default open, add the additional class open to the trigger control.

Via JavaScript

Enable manually with:

$('#myCollapse').CFW_Collapse();

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-cfw-collapse, as in data-cfw-collapse-animate="false".

Name Type Default Description
target string null The selector (jQuery style) of the target collapse item.
animate boolean true If collapse targets should expand and contract.
follow boolean false If browser focus should move when a collapse trigger is activated.
horizontal boolean false Use a horizontal transition instead of the default vertical transition.

Methods

.CFW_Collapse(options)

Activates the content as a collapsible element. Accepts an optional options object.

$('#myCollapse').CFW_Collapse({
    follow: false
});

.CFW_Collapse('toggle')

Toggles a collapsible element to be shown or hidden.

.CFW_Collapse('show')

Shows a collapsible element.

.CFW_Collapse('hide')

Hides a collapsible element.

.CFW_Collapse('dispose')

Disables the collapse control functionality for a given element, leaving the collapse target is its current state.

Events

Event callbacks happen on the toggle/trigger element.

Event Type Description
init.cfw.collapse This event fires after the collapse item is initialized.
beforeShow.cfw.collapse This event is fired immediately when the show method is called.
afterShow.cfw.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
beforeHide.cfw.collapse This event is fired immediately when the hide method is called.
afterHide.cfw.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
$('#myCollapse').on('afterHide.cfw.collapse', function () {
  // do something...
});

Accessibility

If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.