Bootstrap 5 Accordion
- Flush: By adding the .accordion-flush class we can easily remove the default background color, borders, and some rounded corners to render accordions edge-to-edge with their parent container.
- Always Open: To make accordion items stay open when another item is opened, omit the data-bs-parent.
- SASS: We can change the default values of the accordion using Bootstrap 5 SASS variables.
What are different Accordion Components in Bootstrap ?
Bootstrap Accordion Component allows you to create collapsible content panels for presenting information in a space-saving and organized manner. Here are the different accordion components available in Bootstrap:
The table below illustrates the accordion components alongside their description.
Component | Description |
---|---|
Accordion Container | The main container holding all accordion items, created using <div> with class .accordion. |
Accordion Item | Individual collapsible content panel within the accordion, consisting of a header and body section. Created using <div> with class .accordion-item. |
Accordion Header | The visible part of the accordion item for user interaction typically contains a clickable element. Created using <button> or <a> with class .accordion-button. |
Accordion Body | Collapsible content section that expands or collapses when the associated header is clicked. Created using <div> with classes .accordion-collapse and .collapse. |
Accordion Toggle Icon | Optional icon or indicator within the header to visually indicate the accordion item’s state. Achieved using CSS classes or icons from libraries like Font Awesome. |