Accordions organize content into collapsible sections. They use the Collapse plugin to expand or hide content vertically, helping keep interfaces clean and structured.
| Class Name | Type | Description |
|---|---|---|
| accordion | Component | Accordion |
| accordion-item | Inner | Accordion item component |
| accordion-header | Inner | Accordion header component |
| accordion-button | Inner | Accordion collapse button |
| accordion-body | Inner | Accordion body component |
The accordion internally utilizes the collapse component for its collapsible functionality.
prefers-reduced-motion media query. Refer to the accessibility documentation’s reduced motion section for details.Accordions can be expanded or collapsed to show or hide content. By default, all panels are collapsed. To display a panel as open on page load
.show class to the .accordion-collapse element..collapsed class from the .accordion-button element and set the aria-expanded attribute to true.This is the first item’s accordion body It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the second item’s accordion body It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item’s accordion body It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
HTML
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item 1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p class="mb-0">This is the first item’s accordion body It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item 2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p class="mb-0">This is the second item’s accordion body It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item 3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p class="mb-0">This is the third item’s accordion body It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.</p>
</div>
</div>
</div>
</div>
To keep multiple accordion items open at the same time, omit the data-bs-parent attribute from each .accordion-collapse element.
This is the first item’s accordion body It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the second item’s accordion body It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item’s accordion body It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
HTML
<div class="accordion" id="accordionAlwaysOpen">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOneAlwaysOpen" aria-expanded="true" aria-controls="collapseOneAlwaysOpen">
Accordion Item 1
</button>
</h2>
<div id="collapseOneAlwaysOpen" class="accordion-collapse collapse show">
<div class="accordion-body">
<p class="mb-0">This is the first item’s accordion body It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwoAlwaysOpen" aria-expanded="false" aria-controls="collapseTwoAlwaysOpen">
Accordion Item 2
</button>
</h2>
<div id="collapseTwoAlwaysOpen" class="accordion-collapse collapse">
<div class="accordion-body">
<p class="mb-0">This is the second item’s accordion body It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThreeAlwaysOpen" aria-expanded="false" aria-controls="collapseThreeAlwaysOpen">
Accordion Item 3
</button>
</h2>
<div id="collapseThreeAlwaysOpen" class="accordion-collapse collapse">
<div class="accordion-body">
<p class="mb-0">This is the third item’s accordion body It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.</p>
</div>
</div>
</div>
</div>The accordion component is built using a set of CSS variables. These variables provide flexibility for customizing styles.
.accordion {
--accordion-color: var(--text-color-default);
--accordion-bg: var(--background-color-default);
--accordion-border-color: var(--border-color-base);
--accordion-border-width: 0;
--accordion-border-radius: var(--radius-lg);
--accordion-btn-padding-x: --spacing(6);
--accordion-btn-padding-y: --spacing(6);
--accordion-btn-font-size: var(--text-base);
--accordion-btn-color: var(--text-color-default);
--accordion-btn-bg: transparent;
--accordion-btn-icon: ...;
--accordion-btn-icon-width: 1rem;
--accordion-btn-icon-transform: rotate(-180deg);
--accordion-btn-icon-transition: transform 0.2s ease-in-out;
--accordion-btn-active-icon: ...;
--accordion-body-padding-x: --spacing(6);
--accordion-body-padding-y: --spacing(6);
--accordion-hover-color: var(--text-color-default);
--accordion-hover-bg: var(--background-color-subtle);
}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.
Use JavaScript in the familiar pattern of Bootstrap’s plugins with full additional TypeScript Support.
Manual enablement is achieved with the following JavaScript:
const accordionCollapseElementList = document.querySelectorAll('#myAccordion .collapse')
const accordionCollapseList = [...accordionCollapseElementList].map(accordionCollapseEl => new hummingbird.Collapse(accordionCollapseEl))
Options can be configured either through data attributes or 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 passed 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, which can contain component configuration as a JSON string. When an element possesses both data-bs-config='{"delay":0, "title":123}' and data-bs-title="456", the final title value will be 456, as individual data attributes override values provided in data-bs-config. Furthermore, existing data-bs-attributes can also house JSON values, such as data-bs-delay='{"show":0,"hide":150}'.
The ultimate configuration object is the result of merging data-bs-config, individual data-bs-attributes, and JavaScript objects with the latest provided key-value pair taking precedence.
| 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). |
Hummingbird’s 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). |
const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
// do something...
})