Bootstrap Makers/Tools
|
Buttons
|
Tables
|
Modal
|
Carousel
|
Dropdown
|
Accordion
|
Badges
|
Other Tools
Popovers
Breadcrumbs
Progress
Alerts
Tooltips
Spinner
Pagination
Range
Floating Labels
Text Styles
Link Maker
|
About
Bootstrap 5 Accordion Maker
Options
Flush (edge-to-edge)
Always Open
Panel Background Color:
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Panel Text Color:
White
Dark
Muted
Primary
Success
Icon Type:
Chevron
Circle Arrow
Caret
Plus
Preview
Generated Code
Copy Code
FAQs
What is the "Flush" option?
Adding the
.accordion-flush
class removes borders and rounded corners, making the accordion fit edge-to-edge with its container.
What does "Always Open" do?
Omitting the
data-bs-parent
attribute allows multiple accordion items to stay open at the same time.
How do I customize panel colors?
Use the "Panel Color" dropdown to select a Bootstrap contextual class for the accordion panels.
How do I change accordion icons?
Use the "Icon Type" dropdown to select different icons for opening and closing accordion items.