Accordion · Bootstrap v6.0

Build vertically collapsing accordions with native HTML <details> and <summary> elements.
The accordion uses native HTML <details> and <summary> elements, leveraging the name attribute to create exclusive accordions where only one item can be open at a time. This approach requires no JavaScript for core functionality and is fully accessible by default.
Click the accordions below to expand/collapse the accordion content. Each <details> element shares the same name attribute value, creating an exclusive accordion where opening one item automatically closes the others.
To render an accordion that’s expanded by default, add the open attribute to the <details> element.
The panel height animation needs interpolate-size. Browsers without it open and close the panel at once. See Transitions to change the timing or to remove it.
The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.
Use the contextual .theme-{color} classes to apply a semantic theme color to open accordion items.
Add .accordion-sm to the .accordion for a more compact accordion with tighter padding, a smaller border radius, and a smaller font size.
Add .accordion-flush to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.
Add .accordion-gap to put space between accordion items. Each item is a separate rounded card.
The gap lives on the accordion, not the panel. The panel still animates only its block-size, so the open and close transition stays smooth.
Omit the name attribute on each <details> element to allow multiple accordion items to be open simultaneously.
To enable expanding and collapsing of all accordion items at once, remove the name attribute from each <details> element using JavaScript. This allows multiple accordion items to be open simultaneously. Restore the name attribute when you collapse the items again if you want exclusive behavior back.
We use the following JavaScript for this demo:
Accordions can be nested inside each other by placing a full .accordion within an .accordion-body. Use unique name attribute values for each level so the parent and child accordions operate independently.
The native <details> and <summary> elements provide built-in accessibility:
Accordions use local CSS variables on .accordion for real-time customization. Values for the CSS variables are generated from Sass maps unique to each component and applied to the aforementioned class.
The accordion uses an inline SVG for the chevron icon. You can customize this by replacing the SVG within the .accordion-header:
The .accordion-icon class handles positioning and the rotation animation when the accordion opens.
You can listen for the native toggle event on <details> elements:
Toggle accordion items programmatically using the open property: