Bootstrap 5 accordion menus are used to manage a large amount of content and navigation lists.
Steps:To create bootstrap 5 accordion menu:
.accordion
to the accordion container and also assign a unique id.
.accordion-item
to the every child of .accordion
element.
.accordion-header
to
<h*>
element base class and provide unique id. Then place a button inside <h*>
element.
data-bs-toggle="collapse"
, .accordion-button
& add data attribute
data-bs-target="#AccordionBodyContainerId"
and assign respective accordion body container id that will be preceded by hash character(#).
.accordion-collapse.collapse
to the accordion body parent container , also assign unique id and point it to button's data attribute data-bs-target
and add data attribute data-bs-parent="#accordionExample"
and assign accordion unique id inside it that will be preceded by the hash character.
.accordion-body
..show
to one of the accordion body parent container base classes to show its content.
Note: It is most useful to hide and show a large amount of data.
Note:In this example, the bootstrap accordion concept is used on the basis of above mention steps.
To create bootstrap 5 accordion flush, add .accordion-flush
to remove the default background color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
.accordion-flush
class.
.accordion-flush
class.
.accordion-flush
class.
Note:In this example, the bootstrap accordion-flush concept is used to remove the default background color, some borders, and some rounded corners.