The Collapse component toggles content visibility with simple classes and JavaScript, allowing smooth expand and collapse animations.
| Class Name | Type | Description |
|---|---|---|
| collapse | Component | Collapse |
| collapse-horizontal | Modifier | Accordion item component |
| multi-collapse | Modifier | Accordion header component |
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors serve as triggers mapped to specific elements for toggling. Collapsing an element animates its height from its current value to 0. Due to CSS animation handling, padding cannot be directly applied to a .collapse element; instead, use the class as an independent wrapping element.
prefers-reduced-motion media query. Refer to the accessibility documentation’s reduced motion section for details.Use the collapse component to toggle visibility with class changes:
.collapse hides content.collapsing applies during transitions.collapse.show displays contentUse a <button> with data-bs-target (recommended), or an <a> with href and role="button". In both cases, include data-bs-toggle="collapse".
HTML
<div class="inline-flex gap-2 mb-3">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Link with href</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-bs-target</button>
</div>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>The collapse plugin supports horizontal collapsing. Add the .collapse-horizontal class to transition the width instead of the height, and define a width on the immediate child element.
HTML
<div class='mb-3'>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">Toggle width collapse</button>
</div>
<div class='min-h-30'>
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body w-75">
This is some placeholder content for a horizontal collapse. It’s hidden by default and shown when triggered.
</div>
</div>
</div>A <button> or <a> can control multiple elements by listing them in its data-bs-target or href attribute. Conversely, multiple <button> or <a> elements can control the same target if they reference it with data-bs-target or href.
HTML
<div class="inline-flex gap-1 mb-3">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div>
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>The collapse plugin employs specific classes to manage its primary functions:
.collapse conceals content..collapse.show displays content..collapsing is present during the transition’s start and removed upon its completion.These classes are located within transitions.css.
To automatically control one or more collapsible elements, simply add data-bs-toggle="collapse" and a data-bs-target to the desired element. The data-bs-target attribute accepts a CSS selector, indicating which element to apply the collapse functionality to. Ensure the collapse class is also added to the collapsible element. To have it open by default, include the show class as well.
To enable accordion-like group management within a collapsible area, append the data-bs-parent="#selector" attribute. For more comprehensive information, refer to the accordion page.
Use JavaScript in the familiar pattern of Bootstrap’s plugins with full additional TypeScript Support.
Manual enablement is achieved with the following JavaScript:
const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new hummingbird.Collapse(collapseEl))
Options can be provided through data attributes or via JavaScript. When using data-bs-attributes, append the option’s name (e.g., data-bs-animation="{value}"). It is crucial to convert “camelCase” option names to “kebab-case” when passing options via data attributes. For instance, use data-bs-custom-class="beautifier" rather than data-bs-customClass="beautifier".
Collapse component support data-bs-config data attribute. This attribute can contain simple component configurations as a JSON string. If an element has both data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456, as separate data attributes override values provided within data-bs-config. Additionally, existing data attributes can also house JSON values, such as data-bs-delay='{"show":0,"hide":150}'.
The ultimate configuration object results from merging data-bs-config, individual data-bs-attributes, and JavaScript objects, where the latest provided key-value pair takes precedence over others.
| Name | Type | Default | Description |
|---|---|---|---|
parent | selector | DOM element | null | If a parent is specified, all other collapsible elements within that parent will close when the current collapsible item is shown. This behavior is similar to traditional accordions and depends on the card class. This attribute must be set on the target collapsible area. |
toggle | boolean | true | This option controls whether the collapsible element is toggled (shown or hidden) upon its initialization. |
These methods enable content as a collapsible element and accept an optional options object.
A collapse instance can be created with the constructor, as demonstrated:
const myCollapse = new hummingbird.Collapse('#myCollapse', {
toggle: false
})| Method | Description |
|---|---|
dispose | Destroys an element’s collapse functionality, removing stored data from the DOM element. |
getInstance | A static method allowing retrieval of the collapse instance associated with a DOM element. Usage: hummingbird.Collapse.getInstance(element). |
getOrCreateInstance | A static method that returns an existing collapse instance for a DOM element or creates a new one if it has not been initialized. Usage: hummingbird.Collapse.getOrCreateInstance(element). |
hide | Conceals a collapsible element. It returns to the caller before the collapsible element has completed its hiding animation (e.g., before the hidden.bs.collapse event occurs). |
show | Displays a collapsible element. It returns to the caller before the collapsible element has completed its showing animation (e.g., before the shown.bs.collapse event occurs). |
toggle | Toggles a collapsible element between its shown and hidden states. It returns to the caller before the collapsible element has completed its animation (i.e., before the shown.bs.collapse or hidden.bs.collapse events occur). |
Collapse class exposes several events, providing hooks into its collapse functionality.
| Event Type | Description |
|---|---|
hide.bs.collapse | This event fires immediately when the hide method is called. |
hidden.bs.collapse | This event fires when a collapse element has finished hiding from the user (waiting for CSS transitions to complete). |
show.bs.collapse | This event fires immediately when the show instance method is called. |
shown.bs.collapse | This event fires when a collapse element has finished becoming visible to the user (waiting for CSS transitions to complete). |
Example event listener:
const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
// do something...
})