Default
The base accordion — one panel open at a time.
Tabler offers a modern, responsive design with a clean aesthetic, built on Bootstrap for ease of use and flexibility.
You can customize Tabler components using CSS variables, SCSS, and utility classes to match your design preferences.
Yes, Tabler is lightweight, optimized for modern browsers, and follows best practices for fast loading and efficiency.
Tabler components follow WAI-ARIA standards and support keyboard navigation, screen readers, and accessibility best practices.
Flush
Add accordion-flush to remove the card border and rounded corners.
Tabler offers a modern, responsive design with a clean aesthetic, built on Bootstrap for ease of use and flexibility.
You can customize Tabler components using CSS variables, SCSS, and utility classes to match your design preferences.
Yes, Tabler is lightweight, optimized for modern browsers, and follows best practices for fast loading and efficiency.
Tabler components follow WAI-ARIA standards and support keyboard navigation, screen readers, and accessibility best practices.
Tabs
Add accordion-tabs for a tab-like header instead of the default style.
Tabler offers a modern, responsive design with a clean aesthetic, built on Bootstrap for ease of use and flexibility.
You can customize Tabler components using CSS variables, SCSS, and utility classes to match your design preferences.
Yes, Tabler is lightweight, optimized for modern browsers, and follows best practices for fast loading and efficiency.
Tabler components follow WAI-ARIA standards and support keyboard navigation, screen readers, and accessibility best practices.
Inverted
Add accordion-inverted to flip the toggle icon to the start of the header.
Tabler offers a modern, responsive design with a clean aesthetic, built on Bootstrap for ease of use and flexibility.
You can customize Tabler components using CSS variables, SCSS, and utility classes to match your design preferences.
Yes, Tabler is lightweight, optimized for modern browsers, and follows best practices for fast loading and efficiency.
Tabler components follow WAI-ARIA standards and support keyboard navigation, screen readers, and accessibility best practices.
Inverted with plus icon
Combine accordion-inverted with accordion-button-toggle-plus and a custom icon in the toggle.
Tabler offers a modern, responsive design with a clean aesthetic, built on Bootstrap for ease of use and flexibility.
You can customize Tabler components using CSS variables, SCSS, and utility classes to match your design preferences.
Yes, Tabler is lightweight, optimized for modern browsers, and follows best practices for fast loading and efficiency.
Tabler components follow WAI-ARIA standards and support keyboard navigation, screen readers, and accessibility best practices.
With icons
Add an accordion-button-icon next to each panel's title.
Tabler offers a modern, responsive design with a clean aesthetic, built on Bootstrap for ease of use and flexibility.
You can customize Tabler components using CSS variables, SCSS, and utility classes to match your design preferences.
Yes, Tabler is lightweight, optimized for modern browsers, and follows best practices for fast loading and efficiency.
Tabler components follow WAI-ARIA standards and support keyboard navigation, screen readers, and accessibility best practices.