Accordions
The accordion component is a collection of vertically collapsing header and body elements that can be used to show and hide information based on the Tailwind CSS utility classes and JavaScript.
1. Default Accordion
Copy
Use the data-accordion="collapse" to collapse every other child element when expanding a single one.

Neykart is an html5 template of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, Navbars, and more.

2. Always Open Accordion
Copy
Use the data-accordion="open" option to keep previously opened accordion elements unchanged.

Neykart is an html5 template of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, Navbars, and more.

3. Color options Accordion
Copy
Use the data-active-classes and data-inactive-classes to set the active and inactive classes for the header element whenever the accordion is expanded by applying as many classes as you want, but make sure to separate them with a space. If the data attribute is not set or empty, it will apply the default classes.
Here is an example where we apply the blue colors instead of gray:

Neykart is an html5 template of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.

4. Flush Accordion
Copy
Use this example to remove the background color and rounded borders from the accordion component.

Neykart is an html5 template of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.

5. Arrow Style Accordion
Copy
Use the data-accordion-icon data attribute to optionally set an element to rotate 180 degrees when the accordion element is expanded. If the data attribute is not set, then it will not rotate.

Neykart is an html5 template of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.

Subscribe for updates

Stay in Touch with us and get all the updates for next offers and Deals.

Copyright © NYCompany | All Rights Reserved.