- Components
- Accordion
Components
Tailwind CSS Accordion
Browse free customizable Tailwind CSS accordions. Choose from basic, nested, bordered, arrowed, and other styles to collapse and expand UI elements.
Requires JS
Note that this component requires the use of our Accordion plugin, else you can skip this message if you are already using Preline UI as a package.
Example
Click the accordions below to expand/collapse the accordion content.
This is the third 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.
Always open
To make accordion items stay open when another item is opened, use data-hs-accordion-always-open.
This is the third 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.
Nested
A basic form of the accordion with sub menu.
This is the third 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.
No arrow
Example with no arrow.
This is the third 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.
With arrow
A basic form of the accordion with arrow.
This is the third 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.
With title and arrow stretched
A basic form of the accordion with title and arrow stretched.
This is the third 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.
Bordered
A basic form of the bordered accordion.
This is the third 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.
Active content bordered
Active content bordered accordion.
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.
Destroy and Reinitialize New
Provides destroy method that helps to destroy an accordion.
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.
