Accordion

Accordions organize content into collapsible sections. They use the Collapse plugin to expand or hide content vertically, helping keep interfaces clean and structured.

Accordion components integrate Bootstrap's JavaScript plugins for interactivity, paired with custom styling for a unique and consistent user experience.

How it works

The accordion internally utilizes the collapse component for its collapsible functionality.

The animation effect of this component relies on the prefers-reduced-motion media query. Refer to the accessibility documentation’s reduced motion section for details.

Basic accordion

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

Add the .show class to the .accordion-collapse element.
Remove the .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>

Always open

To keep multiple accordion items open at the same time, omit the data-bs-parent attribute from each .accordion-collapse element.

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>

Class Overview

A list of all available utility classes for the accordion component.

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

CSS variables

The accordion component is built using a set of CSS variables. These variables provide flexibility for customizing styles. See the Theming to customize styles globally and apply overrides as needed.

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

Usage

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.

Via data attributes

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.

Via JavaScript

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

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.

Methods

All API methods are asynchronous and initiate a transition. They return to the caller immediately after the transition begins, but before it concludes. Additionally, a method call on a component that is already transitioning will be disregarded. More information is available in Bootstrap’s JavaScript documentation

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

Events

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

Overview

Alerts

Getting Started

Customize

Layout & content

Forms

Advanced Forms

Components