# Accordions

###### Boost user engagement and streamline content with a sleek, collapsible component that organizes information seamlessly with smooth animations and minimal code.

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

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode