Accordion
Default
An accordion is a vertical stack of interactive headings used to toggle the display of further information. Each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.
Accordions work well on smaller screens, as they reduce the amount of vertical scrolling required to get an overview of the content. They also require very little horizontal space, unlike components such as tabs.
Be mindful that when you are using an accordion you are hiding content from users — they therefore should not be used for essential information. Ensure proper ARIA attributes are used for screen readers.
Has Title Slot
Novalara is multi-purpose Laravel Admin and Dashboard template built with TALL stack.
Be mindful that when you are using an accordion you are hiding content from users — they therefore should not be used for essential information. Ensure proper ARIA attributes are used for screen readers.
Multiple Open
An accordion is a vertical stack of interactive headings used to toggle the display of further information. Each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.
Accordions work well on smaller screens, as they reduce the amount of vertical scrolling required to get an overview of the content. They also require very little horizontal space, unlike components such as tabs.
Be mindful that when you are using an accordion you are hiding content from users — they therefore should not be used for essential information. Ensure proper ARIA attributes are used for screen readers.
Ungrouped Accordions
An accordion is a vertical stack of interactive headings used to toggle the display of further information. Each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.
Accordions work well on smaller screens, as they reduce the amount of vertical scrolling required to get an overview of the content. They also require very little horizontal space, unlike components such as tabs.
Be mindful that when you are using an accordion you are hiding content from users — they therefore should not be used for essential information. Ensure proper ARIA attributes are used for screen readers.
Colored Accordions
An accordion is a vertical stack of interactive headings used to toggle the display of further information. Each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.
Accordions work well on smaller screens, as they reduce the amount of vertical scrolling required to get an overview of the content. They also require very little horizontal space, unlike components such as tabs.
Be mindful that when you are using an accordion you are hiding content from users — they therefore should not be used for essential information. Ensure proper ARIA attributes are used for screen readers.
An accordion is a vertical stack of interactive headings used to toggle the display of further information. Each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.
Accordions work well on smaller screens, as they reduce the amount of vertical scrolling required to get an overview of the content. They also require very little horizontal space, unlike components such as tabs.
Be mindful that when you are using an accordion you are hiding content from users — they therefore should not be used for essential information. Ensure proper ARIA attributes are used for screen readers.