Collapse

Create versatile collapsible content areas anywhere in your Help Center.

This plugin is used in our themes to create mobile navigation menus, collapsible article lists, toggle sections and more.

Usage

Use .collapse to create a hidden, collapsible element.

Via data attributes

Use the [data-toggle="collapse"] attribute to create a trigger. The collapsible element targeted by the trigger is identified by a CSS selector specified in the href (in the case of a link) or data-target attribute.

The plugin will apply the following classes to the collapsible element when visitors click on the associated trigger:

.collapsing during transitions and is responsible for the transition effect.
.is-visible when the element is visible.

If data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.

Examples

Single collapsible target

Multiple triggers can target a single collapsible element:

Link with href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a class="button button-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="button button-primary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Multiple collapsible targets

A single trigger element can target multiple collapsible elements:

Toggle first element

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a class="button button-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="button button-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="button button-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Collapsible groups

Use the data-parent attribute on one or more collapsible elements to group them on the basis of a common ancestor element. If two or more collapsible elements are grouped, only one can be open at a time. This functionality is used by our Toggles plugin to create accordions:

The default toggles template

Preview
Code

<ul class="js-toggles">
  <li data-title="The first toggle title">
    <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.</p>
  </li>
  <li data-title="The second toggle title">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </li>
  <li data-title="The third toggle title">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue justo a metus bibendum dapibus. In imperdiet interdum tincidunt. Nam odio dolor, hendrerit vel eros non, viverra pellentesque tellus. Proin ac elit in leo faucibus gravida. Donec ut neque non augue porttitor mollis a quis eros.</p>
  </li>
</ul>

Show content

Use .{screen}:expand to expand the .collapse element on specific screen sizes.

This is useful when you want an element to behave as a collapsible element on small screen sizes, but be visible on large screen sizes.

Options

Name	Type	Default	Description
parent	`string` `DOM element`	`null`	If a parent is provided, all collapsible elements under the specified parent will be hidden when this collapsible item is shown.
toggle	`boolean`	`true`	If `true`, the collapsible element will be toggled on initialization.

Events

Name	Description
`collapse.show`	Fires when the `show()` method is called, but before the collapse element is visible.
`collapse.shown`	Fires when the collapse element is visible (after CSS transitions have completed).
`collapse.hide`	Fires when the `hide()` method is called, but before the collapse element is hidden.
`collapse.hidden`	Fires when the collapse element is hidden (after CSS transitions have completed).

document.addEventListener('collapse.show', function(e) {
  // Do something...
});

Core concepts

Setup

Base styles

Plugins