Use the .accordion component to provide a way to toggle the visibility of content. Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies.

If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded="false". If you've set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead.

Learn more about this plugin on Bootstrap's official documentation.

Default Accordion

Just add data-bs-toggle="collapse" and a data-bs-target to the element to automatically assign control of one or more collapsible elements. The data-bs-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class show.

To add accordion-like group management to a collapsible area, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Accordions work well inside forms and modals, helping break down complex inputs into manageable steps.

Instead of overwhelming users with long forms, collapsible sections allow for a more progressive disclosure approach.

For example, sections like Billing Details, Shipping Address, and Payment Method can be toggled individually.

This improves usability, reduces scrolling, and keeps the UI clean and focused.

Accordion Outline

Change the style of your accordion by adding class .accordion-outline to .accordion

The Bootstrap Accordion component allows users to toggle between sections of content in a collapsible manner.

Each accordion item contains a header and a body. The header triggers the collapse behavior, while the body contains the actual content.

Developers can use Bootstrap’s JavaScript API to control accordion behavior dynamically. Accessibility is also considered, with proper ARIA attributes ensuring screen reader compatibility.

Each accordion consists of a parent container with multiple accordion items. Each item has a header that users can click to expand or collapse the content inside.

Accordion Clean layout

Give your accordion a clean look by adding class .accordion-clean to .accordion

By default, Bootstrap uses the collapse.js plugin to manage this behavior, ensuring smooth transitions and accessibility. The accordion structure supports custom styles, such as different background colors, border-radius adjustments, and shadow effects.

You can also integrate strong icons or animations to indicate when a section is opened or closed, improving user experience.

However, developers can tweak the settings to allow multiple sections to stay open simultaneously using data-bs-parent="false".

Accordion active state icons

Add some navigation to a card's header (or block) with built-in nav components. You can reveal or hide elements during .collapse state using the classes .collapsed-reveal and .collapsed-hidden

Make sure the .collapsed-* classes are inside the data-toggle="collapse" element or adjacent to it

In addition to its built-in styling, the accordion can be controlled programmatically using Bootstrap’s JavaScript API. Functions like .collapse('toggle') allow developers to open, close, or update accordion elements dynamically via JavaScript.

For accessibility, Bootstrap includes strong ARIA attributes such as aria-expanded and aria-controls, ensuring screen readers can navigate the accordion efficiently.

This makes it an excellent choice for creating responsive, mobile-friendly interfaces with a clean and structured layout.

Accordion hover

Adding a hover effect adds nice element to your accordion. Achieve this by adding class .accordion-hover to .accordion

Bootstrap Accordion allows extensive customization using CSS variables and utility classes. You can modify backgrounds, borders, typography, and spacing to match your website’s design system.

For example, applying bg-primary text-white to an accordion header gives it a bold, standout appearance. Additionally, you can tweak data-bs-theme="dark" to create a sleek, modern dark mode version.

Icons can be added to accordion headers to indicate expansion and collapse actions. Bootstrap provides built-in icons from Bootstrap Icons, Font Awesome, or custom SVGs for this purpose.

For instance, using bi-chevron-down and toggling classes dynamically can enhance user interaction. These visual indicators improve clarity and provide a better UX for touch-based navigation.

Placing an accordion inside a Bootstrap Card can enhance the structure and readability of content. This combination is often used for pricing tables, user profiles, or expandable content sections.

Cards provide additional padding, shadows, and borders, making the accordion feel more polished and refined. Applying card-header styles to the accordion title further integrates the two seamlessly.

Nested accordions

Caution! Nested accordions will inherit the properties of its parent. In the example below we use the default accordion for parent and a different style for children.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Oops! Looks like there are no reports available for this user