Accordions & Collapse
📁 Default Accordion
Default accordion item content. Bootstrap 5 default styling.
Second item content.
💧 Accordion Flush
No borders, rounded corners removed.
Flush style looks like a list.
🔘 Accordions with Icons
Icons placed on the right side inside button.
🚫 Accordions without Icons
Standard Bootstrap accordion without extra icons.
➕ Accordions with Plus Icon
⬅️ Left Icon Accordions
Icon appears on the left side of the button text.
🔲 Accordions Bordered
Each item has a visible border and border-radius.
🪆 Nesting Accordions
This is nested inside parent.
🎨 Accordions Fill Colored
Custom background for accordion buttons.
📉 Collapse Example
Hidden content revealed with collapse component.
↔️ Horizontal Collapse
This content collapses horizontally.
🔽 Collapse with Icon
Icon rotates when collapse toggles (see JS).
📐 Inline & Block Element Collapse
Inline: Show inline content
This appears inline (but block by default, can be inline-block with custom css).
Block element:
This is a block level collapse (full width).
🎯 Multiple Targets Collapse
First element collapsed.
Second element collapsed.