Accordion
Collapsible accordion components for organizing content
Basic Example
Click the accordions below to expand/collapse the accordion content.
The accordion body of the first item is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. Carefully curated classes seamlessly control its appearance and facilitate smooth transitions, ensuring an elegant and dynamic user experience.
Always open
incorporating the data-hs-accordion-always-open
attribute, this feature seamlessly transforms your accordion into a user-friendly interface
The accordion body of the third item remains concealed initially, awaiting the touch of the collapse plugin to unveil its content. Carefully curated classes seamlessly control its appearance and facilitate smooth transitions, ensuring an elegant and dynamic user experience.
Nested Accordion
Explore an intuitive design with nested submenus for a seamless and organized user experience.
The accordion body of the third item remains concealed initially, awaiting the touch of the collapse plugin to unveil its content. Carefully curated classes seamlessly control its appearance and facilitate smooth transitions, ensuring an elegant and dynamic user experience.
With out arrow
Example with no arrow.
The accordion body of the third item remains concealed initially, awaiting the touch of the collapse plugin to unveil its content. Carefully curated classes seamlessly control its appearance and facilitate smooth transitions, ensuring an elegant and dynamic user experience.
Primary Color
A basic form of the accordion with title and arrow stretched with primary color.
The accordion body of the third item remains concealed initially, awaiting the touch of the collapse plugin to unveil its content. Carefully curated classes seamlessly control its appearance and facilitate smooth transitions, ensuring an elegant and dynamic user experience.
Info Color
A basic form of the accordion with title and arrow stretched with Info color.
The accordion body of the third item remains concealed initially, awaiting the touch of the collapse plugin to unveil its content. Carefully curated classes seamlessly control its appearance and facilitate smooth transitions, ensuring an elegant and dynamic user experience.
Soft Primary Color
A basic form of the accordion with title and arrow stretched with Soft Primary color.
The accordion body of the third item remains concealed initially, awaiting the touch of the collapse plugin to unveil its content. Carefully curated classes seamlessly control its appearance and facilitate smooth transitions, ensuring an elegant and dynamic user experience.
Soft Info Color
A basic form of the accordion with title and arrow stretched with Soft Info color.
The accordion body of the third item remains concealed initially, awaiting the touch of the collapse plugin to unveil its content. Carefully curated classes seamlessly control its appearance and facilitate smooth transitions, ensuring an elegant and dynamic user experience.
With arrow Left Side
A basic form of the accordion with arrow.
The accordion body of the third item remains concealed initially, awaiting the touch of the collapse plugin to unveil its content. Carefully curated classes seamlessly control its appearance and facilitate smooth transitions, ensuring an elegant and dynamic user experience.
With title and arrow stretched
A basic form of the accordion with title and arrow stretched.
The accordion body of the third item remains concealed initially, awaiting the touch of the collapse plugin to unveil its content. Carefully curated classes seamlessly control its appearance and facilitate smooth transitions, ensuring an elegant and dynamic user experience.
Destroy and Reinitialize
Provides Destroy method that helps to destroy the accordion instance and reinitialize it.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
Primary
A basic form of the accordion with title and arrow stretched with primary color.
Success
A basic form of the accordion with title and arrow stretched with Success color.