Bootstrap 5 Accordion

Bootstrap 5 Accordion

Bootstrap 5 accordion menus are used to manage a large amount of content and navigation lists.

Steps:To create bootstrap 5 accordion menu:

  • Add .accordion to the accordion container and also assign a unique id.
  • Assign .accordion-item to the every child of .accordion element.
  • Assign .accordion-header to <h*> element base class and provide unique id. Then place a button inside <h*> element.
  • Assign every button to data attribute 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(#).
  • Assign .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.
  • Write text content inside .accordion-body.
  • Add .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.

Example

Source Code

Try it now

Source Code : Output

First Accodion Heading This is first accodion content.

Second Accodion Heading This is second accodion content.

This Accodion Heading This is thid accodion content.

Code Explanation

Note:In this example, the bootstrap accordion concept is used on the basis of above mention steps.

Bootstrap 5 Accordion Flush

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.

Source Code

Try it now

Source Code : Output

This is the first item's accordion body content, which is intended to demonstrate the .accordion-flush class.

This is the second item's accordion body content, which is intended to demonstrate the .accordion-flush class.

This is the second item's accordion body content, which is intended to demonstrate the .accordion-flush class.

Code Explanation

Note:In this example, the bootstrap accordion-flush concept is used to remove the default background color, some borders, and some rounded corners.

Online Test / Quiz