Accordions

Basic

The accordion uses collapse. internally to make it collapsible. To render an accordion that’s expanded, add the .open class on the .accordion

Extend the default collapse behavior to create an accordion.

This is the first item’s accordion body. You can pair each title with a relevant icon to improve scanning speed and user experience. Use different icons to represent unique types of content.

This is the second item’s accordion body. Icons help users quickly identify sections related to settings, configurations, or other specific actions. This approach is particularly useful in applications with multiple functional areas.

This is the third item’s accordion body. Use icons to indicate notifications, alerts, or updates. This helps users quickly locate important information without reading through all content.

Flush

The flush accordion removes borders, background, and rounded corners for a seamless design. To make an accordion flush, add the .accordion-flush class to the .accordion.

Extend the accordion to blend with its parent container without extra spacing.

This is the first item’s accordion body. You can pair each title with a relevant icon to improve scanning speed and user experience. Use different icons to represent unique types of content.

This is the second item’s accordion body. Icons help users quickly identify sections related to settings, configurations, or other specific actions. This approach is particularly useful in applications with multiple functional areas.

This is the third item’s accordion body. Use icons to indicate notifications, alerts, or updates. This helps users quickly locate important information without reading through all content.

Border Based

The border-based accordion keeps its default borders and background for clear separation between items.

Great for visually distinct sections with clear boundaries.

This is the first item’s accordion body. You can pair each title with a relevant icon to improve scanning speed and user experience. Use different icons to represent unique types of content.

This is the second item’s accordion body. Icons help users quickly identify sections related to settings, configurations, or other specific actions. This approach is particularly useful in applications with multiple functional areas.

This is the third item’s accordion body. Use icons to indicate notifications, alerts, or updates. This helps users quickly locate important information without reading through all content.

Icon Based

The icon-based accordion uses icons alongside titles for quick visual identification of each section.

Ideal for dashboards and menus where visual cues speed up navigation.

This is the first item’s accordion body. You can pair each title with a relevant icon to improve scanning speed and user experience. Use different icons to represent unique types of content.

This is the second item’s accordion body. Icons help users quickly identify sections related to settings, configurations, or other specific actions. This approach is particularly useful in applications with multiple functional areas.

This is the third item’s accordion body. Use icons to indicate notifications, alerts, or updates. This helps users quickly locate important information without reading through all content.

Collapse Based

The icon-based accordion uses icons alongside titles for quick visual identification of each section.

Ideal for dashboards and menus where visual cues speed up navigation.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Horizontal Collapse Based

The icon-based accordion uses icons alongside titles for quick visual identification of each section.

Ideal for dashboards and menus where visual cues speed up navigation.

This is some placeholder content for a horizontal collapse. It’s hidden by default and shown when triggered.

Multiple Collapse Based

The icon-based accordion uses icons alongside titles for quick visual identification of each section.

Ideal for dashboards and menus where visual cues speed up navigation.

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
© Aquiry.
Crafted with by Codebucks