Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Accordion
Accordions are powerful UI components that help organize and present complex information in collapsible sections. They enhance user experience by implementing progressive disclosure, allowing users to focus on specific content while reducing cognitive load. Accordions are particularly effective for FAQs, product details, settings panels, and any interface where space optimization is important.
Standard Accordion
The standard accordion provides a flexible foundation for content organization. Each section can
be expanded or collapsed independently, with smooth transitions and proper accessibility
support. The .accordion class establishes the container, while
.accordion-item defines individual panels and .accordion-header
creates interactive section titles. By default, only one panel can be open at a time.
Flush Style
The flush style accordion (.accordion-flush) removes borders and background colors,
creating a minimalist appearance. This variant is ideal for clean, modern interfaces where the
accordion needs to blend seamlessly with the surrounding design elements. The flush style
reduces visual noise and works particularly well in content-focused layouts where the emphasis
should be on the information rather than the UI components.
Multi-Panel Support
This variant allows multiple panels to remain open simultaneously by omitting the
data-bs-parent attribute. It's particularly useful for comparison scenarios or when
users need to reference multiple sections at once. Each panel maintains its state independently,
providing a more flexible user experience. This approach is ideal for complex interfaces where
users need to view multiple pieces of information simultaneously.
Custom Styled Accordion
Accordions can be customized with different colors, borders, and background styles to match your design system or to create visual hierarchy. This example demonstrates how to use utility classes to create custom-styled accordions with color-coded sections and integrated icons. Custom styling can help users quickly identify different categories of information or highlight important sections.