Use our Tailwind CSS accordion component to allow the user to show and hide sections of related content on a page. There are many ways to use this component, like displaying a list of FAQs, showing various menus and submenus, displaying the locations of a particular company, and so on.
See below our simple and versatile accordion example that you can use in your Tailwind CSS projects. We also included some accordion props that are available.
To use an accordion example that has items expanded, add the
.open class on the
You can use custom icons for the accordion trigger element and using the
group-open attribute selector in tailwind css you can control the icon for open and close states of accordion.
The following data attributes are available for accordion trigger element.
|Set the accordion target element, it should be the same as the |
The following data attributes are available for accordion element.
|Set the accordion element, it should be the same as the |
The accordion component needs a required script file to work, you just need to add the below script file to the bottom of your html file.
<!-- from node_modules --> <script src="node_modules/@material-tailwind/html/scripts/collapse.js"></script> <!-- from cdn --> <script src="https://unpkg.com/@material-tailwind/html@latest/scripts/collapse.js"></script>