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.