Accordions
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.