Skip to main content
Figuration v3 Preview Available!
Widgets

Bring interactivity to your site with a selection of jQuery widgets (plugins) all built with accessibility and usability in mind.

Collapse collapse.js

Get base styles and flexible support for collapsible components like accordions and navigation.

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-toggle="collapseEx1">Collapse <span class="caret"></span></button>
<div class="collapse" data-cfw-collapse-target="collapseEx1">
    <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, but you need to use the data-cfw-collapse-toggle and matching data-cfw-collapse-target attributes so that the toggle and target states are all 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-toggle="multi-collapse">Trigger 1 <span class="caret"></span></a>
<button type="button" class="btn btn-outline-primary" data-cfw="collapse" data-cfw-collapse-toggle="multi-collapse">Trigger 2 <span class="caret"></span></button>
<div data-cfw-collapse-target="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>

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-toggle="collapseEx2" data-cfw-collapse-horizontal="true">Collapse <span class="caret"></span></button>
<div class="collapse width" data-cfw-collapse-target="collapseEx2">
    <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 data-cfw-collapse-toggle with a selector (jQuery style) or string value to the toggle/trigger element to automatically assign control of a collapsible element. If using a string value, then assign a data-cfw-collapse-target attribute, with a matching value to the element to apply the collapse to. 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 toggle.

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
toggle string null Either the selector (jQuery style), or the string related to the target collapse having a data-cfw-collapse-target attribute.
animate boolean true If collapse targets should expand and contract.
speed integer 350 Speed of animation (milliseconds) - corresponds the animation speed specified in CSS.
follow boolean false If browser focus should move when a collapse toggle is activated.
horizontal boolean false Use a horizontal transition instead of the default vertical transition.
hidden boolean true Use the aria-hidden attribute on the target container to indicate visibility status to screen readers.

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.

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...
});