Default Accordion
Use the accordion class to expand/collapse the accordion content.
Accordion Flush
Use accordion-flush class to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
Accordions with Icons
Use custom-accordionwithicon class to show custom icon at accordion.
Accordions without Icons
Use accordion-icon-none class to remove icon at accordion.
Accordions with Plus Icon
Use custom-accordionwithicon-plus class to show plus icon at the accordion.
Left Icon Accordions
Use lefticon-accordion class to show the icon on the left side of the accordion.
Accordions Bordered
Use custom-accordion-border class to create the border at the accordion.
Nesting Accordions
Use nesting-accordion class to create a nesting accordion.
Accordions Fill Colored
Use accordion-fill- class with modifier class to the color accordion.
Collapse Example
You can use a link with the href attribute, or a button with the data-bs-target attribute. In both cases, the data-bs-toggle="collapse" is required.
Horizontal Collapse
Use the collapse-horizontal class to transition the width instead of height and set a width on the immediate child element for horizontal collapse.
Collapse with Icon
Here is the example of collapse in which the icon is wrapped within the button collapse toggle.
Inline & Block Element Collapse
Inline element collapse takes all horizontal space hence you can activate the collapse within by clicking on full-width horizontal space. Block element collapse can be activated by clicking on collapse toggle only.
<h6> Inline Element Collapse
<span> Block Element Collapse
Multiple Targets Collapse
A <button> or <a> can show and hide multiple elements by referencing them with a selector in its href or data-bs-target attribute. Multiple <button> or <a> can
show and hide an element if they each reference it with their href or data-bs-target attribute.