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