Accordion

One way to condense a lot of data in a small space is through the use of accordions. It's probably one of the hardest components to get working because there are so many classes to add.

Accordion Classes

accordion

• accordion-item
  • accordion-header (ID)
  • accordion-button
• accordion-body
  • accordion-collapse (ID)

Try it

Accordions have a main container class that needs an ID to identify it on the page

Inside accordions, you add an accordion-item class for each item that you want to be a part of the accordion.

Inside the items, you can include an accordion-header and an accordion-collapse container classes. Each of these should have an individual ID, so they can be targeted for opening or closing.

Inside the accordion-header, you will create a button with a class of accordion button. It's job is to open or close one of the items.

data-bs-toggle="collapse" - To make sure the javascript knows what this button does.

data-bs-target="ID" - the target element you wan to show or hide. This is the one with the accordion-collapse class.

aria-expanded="true" - If the element is showing, add this.

aria-controls="ID" - For assistive devices, identify the id of the element that gets controlled.

Accordion Flush

• accordion-flush

Try it

There is another option called accordion flush that will get rid of some of the colors and borders...that might be better for inserting in something like a list group.