Tailwind CSS Accordion
Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options
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 from Tailwind.
A popular use case would be the “Frequently Asked Questions” section of a website or page when you can show questions and answers for each child element.
There are two main options to initialize the accordion component:
data-accordion="collapse"show only one active child elementdata-accordion="open"keep multiple elements open
Don’t forget to set the data-accordion-target="{selector}" data attribute to the header element where the value is the id or class of the accordion body element and the aria-expanded="{true|false}" attribute to mark the active or inactive state of the accordion.
Default accordion #
Use the data-accordion="collapse" to collapse every other child element when expanding a single one.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
Tailwind is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
Tailwind is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
Check out the Figma design system based on the utility classes from Tailwind CSS and components from Tailwind.
The main difference is that the core components from Tailwind are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Tailwind relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
However, we actually recommend using both Tailwind, Tailwind Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
Learn more about these technologies:
<div id="accordion-collapse" data-accordion="collapse">
<h2 id="accordion-collapse-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
<span>What is Tailwind?</span>
<svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
<div class="p-5 font-light border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">Tailwind is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
<span>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
<div class="p-5 font-light border border-b-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">Tailwind is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://www.larntocode.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Tailwind.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-3" aria-expanded="false" aria-controls="accordion-collapse-body-3">
<span>What are the differences between Tailwind and Tailwind UI?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-collapse-body-3" class="hidden" aria-labelledby="accordion-collapse-heading-3">
<div class="p-5 font-light border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from Tailwind are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Tailwind relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Tailwind, Tailwind Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
<li><a href="https://www.larntocode.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>Always open #
Use the data-accordion="open" option to keep previously opened accordion elements unchanged.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
Tailwind is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
Tailwind is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
Check out the Figma design system based on the utility classes from Tailwind CSS and components from Tailwind.
The main difference is that the core components from Tailwind are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Tailwind relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
However, we actually recommend using both Tailwind, Tailwind Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
Learn more about these technologies:
<div id="accordion-open" data-accordion="open">
<h2 id="accordion-open-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-open-body-1" aria-expanded="true" aria-controls="accordion-open-body-1">
<span class="flex items-center"><svg class="w-5 h-5 mr-2 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg> What is Tailwind?</span>
<svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-open-body-1" class="hidden" aria-labelledby="accordion-open-heading-1">
<div class="p-5 font-light border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">Tailwind is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-open-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-open-body-2" aria-expanded="false" aria-controls="accordion-open-body-2">
<span class="flex items-center"><svg class="w-5 h-5 mr-2 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-open-body-2" class="hidden" aria-labelledby="accordion-open-heading-2">
<div class="p-5 font-light border border-b-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">Tailwind is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://www.larntocode.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Tailwind.</p>
</div>
</div>
<h2 id="accordion-open-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-open-body-3" aria-expanded="false" aria-controls="accordion-open-body-3">
<span class="flex items-center"><svg class="w-5 h-5 mr-2 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg> What are the differences between Tailwind and Tailwind UI?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-open-body-3" class="hidden" aria-labelledby="accordion-open-heading-3">
<div class="p-5 font-light border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from Tailwind are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Tailwind relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Tailwind, Tailwind Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
<li><a href="https://www.larntocode.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>Color options #
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’s an example where we apply the blue colors instead of gray:
Toggle dark mode
Loading...
- HTML
Copy to clipboard
Tailwind is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
Tailwind is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
Check out the Figma design system based on the utility classes from Tailwind CSS and components from Tailwind.
The main difference is that the core components from Tailwind are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Tailwind relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
However, we actually recommend using both Tailwind, Tailwind Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
Learn more about these technologies:
<div id="accordion-color" data-accordion="collapse" data-active-classes="bg-blue-100 dark:bg-gray-800 text-blue-600 dark:text-white">
<h2 id="accordion-color-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-800 dark:border-gray-700 dark:text-gray-400 hover:bg-blue-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-color-body-1" aria-expanded="true" aria-controls="accordion-color-body-1">
<span>What is Tailwind?</span>
<svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-color-body-1" class="hidden" aria-labelledby="accordion-color-heading-1">
<div class="p-5 font-light border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">Tailwind is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-color-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-800 dark:border-gray-700 dark:text-gray-400 hover:bg-blue-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-color-body-2" aria-expanded="false" aria-controls="accordion-color-body-2">
<span>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-color-body-2" class="hidden" aria-labelledby="accordion-color-heading-2">
<div class="p-5 font-light border border-b-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">Tailwind is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://www.larntocode.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Tailwind.</p>
</div>
</div>
<h2 id="accordion-color-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-800 dark:border-gray-700 dark:text-gray-400 hover:bg-blue-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-color-body-3" aria-expanded="false" aria-controls="accordion-color-body-3">
<span>What are the differences between Tailwind and Tailwind UI?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-color-body-3" class="hidden" aria-labelledby="accordion-color-heading-3">
<div class="p-5 font-light border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from Tailwind are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Tailwind relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Tailwind, Tailwind Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
<li><a href="https://www.larntocode.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>Flush accordion #
Use this example to remove the background color and rounded borders from the accordion component.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
Tailwind is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
Tailwind is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
Check out the Figma design system based on the utility classes from Tailwind CSS and components from Tailwind.
The main difference is that the core components from Tailwind are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Tailwind relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
However, we actually recommend using both Tailwind, Tailwind Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
Learn more about these technologies:
<div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white" data-inactive-classes="text-gray-500 dark:text-gray-400">
<h2 id="accordion-flush-heading-1">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400" data-accordion-target="#accordion-flush-body-1" aria-expanded="true" aria-controls="accordion-flush-body-1">
<span>What is Tailwind?</span>
<svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-flush-body-1" class="hidden" aria-labelledby="accordion-flush-heading-1">
<div class="py-5 font-light border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">Tailwind is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-flush-heading-2">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400" data-accordion-target="#accordion-flush-body-2" aria-expanded="false" aria-controls="accordion-flush-body-2">
<span>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-flush-body-2" class="hidden" aria-labelledby="accordion-flush-heading-2">
<div class="py-5 font-light border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">Tailwind is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://www.larntocode.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Tailwind.</p>
</div>
</div>
<h2 id="accordion-flush-heading-3">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400" data-accordion-target="#accordion-flush-body-3" aria-expanded="false" aria-controls="accordion-flush-body-3">
<span>What are the differences between Tailwind and Tailwind UI?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-flush-body-3" class="hidden" aria-labelledby="accordion-flush-heading-3">
<div class="py-5 font-light border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from Tailwind are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Tailwind relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Tailwind, Tailwind Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
<li><a href="https://www.larntocode.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>Arrow style #
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.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
Tailwind is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
Tailwind is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
Check out the Figma design system based on the utility classes from Tailwind CSS and components from Tailwind.
The main difference is that the core components from Tailwind are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Tailwind relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
However, we actually recommend using both Tailwind, Tailwind Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
Learn more about these technologies:
<div id="accordion-arrow-icon" data-accordion="open">
<h2 id="accordion-arrow-icon-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-900 bg-gray-100 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-arrow-icon-body-1" aria-expanded="true" aria-controls="accordion-arrow-icon-body-1">
<span>Accordion without an arrow</span>
</button>
</h2>
<div id="accordion-arrow-icon-body-1" aria-labelledby="accordion-arrow-icon-heading-1">
<div class="p-5 font-light border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">Tailwind is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-arrow-icon-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-arrow-icon-body-2" aria-expanded="false" aria-controls="accordion-arrow-icon-body-2">
<span>Accordion with another icon</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z"></path></svg>
</button>
</h2>
<div id="accordion-arrow-icon-body-2" class="hidden" aria-labelledby="accordion-arrow-icon-heading-2">
<div class="p-5 font-light border border-b-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">Tailwind is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://www.larntocode.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Tailwind.</p>
</div>
</div>
<h2 id="accordion-arrow-icon-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-arrow-icon-body-3" aria-expanded="false" aria-controls="accordion-arrow-icon-body-3">
<span>Accordion without arrow rotation</span>
<svg class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-arrow-icon-body-3" class="hidden" aria-labelledby="accordion-arrow-icon-heading-3">
<div class="p-5 font-light border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from Tailwind are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Tailwind relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Tailwind, Tailwind Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
<li><a href="https://www.larntocode.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>JavaScript behaviour #
Use the Accordion object from Tailwind to create a collection of vertically collapsing heading and content elements using object parameters, options, methods, and callback functions directly from JavaScript.
Object parameters #
Create a new Accordion object by passing an array of accordion items and an optional options object to customize the styles and add callback functions.
| Parameter | Type | Required | Description |
|---|---|---|---|
items
|
Array | Required | Array of accordion items objects including the unique identifier, heading element, content element, and the active state. |
options
|
Object | Optional | Object of options that you can set to customize the style of the accordion items and set callback functions. |
Options #
Use the following options as the second parameter for the Accordion object to customize the behaviour, styles, and to set callback functions.
| Option | Type | Description |
|---|---|---|
alwaysOpen
|
Boolean | If set to true then multiple accordion elements can be open at the same time. By default it's false. |
activeClasses
|
Array | Set an array of Tailwind CSS class names to apply for the active accordion heading element. |
inactiveClasses
|
Array | Apply an array of Tailwind CSS class names to apply for the inactive accordion heading elements. |
onOpen
|
Function | Set a callback function when a new accordion item has been opened. |
onClose
|
Function | Set a callback function when a new accordion item has been closed. |
Methods #
Use the object methods on the Accordion object to programatically open, close, or toggle the visibility of a given accordion item.
| Method | Description |
|---|---|
toggle(id)
|
Use this function to toggle an accordion item based on its current state. |
open(id)
|
Use this function to open an accordion item based on the id. |
close(id)
|
Use this function to close an accordion item based on the id. |
Example #
Learn more about using the Accordion object from Tailwind in this example in JavaScript.
To get started you need to create an array of accordion item objects including a unique identifier (it can be a number as well), a trigger element (eg. a button), a content element (the content body), and the active state.
Additionally, you can also set some options to change the default behaviour of the accordion, customize the styles, and set callback functions.
// create an array of objects with the id, trigger element (eg. button), and the content element
const accordionItems = [
{
id: 'accordion-example-heading-1',
triggerEl: document.querySelector('#accordion-example-heading-1'),
targetEl: document.querySelector('#accordion-example-body-1'),
active: true
},
{
id: 'accordion-example-heading-2',
triggerEl: document.querySelector('#accordion-example-heading-2'),
targetEl: document.querySelector('#accordion-example-body-2'),
active: false
},
{
id: 'accordion-example-heading-3',
triggerEl: document.querySelector('#accordion-example-heading-3'),
targetEl: document.querySelector('#accordion-example-body-3'),
active: false
}
]
// options with default values
const options = {
alwaysOpen: true,
activeClasses: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
inactiveClasses: 'text-gray-500 dark:text-gray-400',
onOpen: (item) => {
console.log('accordion item has been shown')
console.log(item)
},
onClose: (item) => {
console.log('accordion item has been hidden')
console.log(item)
},
onToggle: (item) => {
console.log('accordion item has been toggled')
console.log(item)
}
}
Create a new Accordion object using the options set above as the parameters.
/*
* accordionItems: array of accordion item objects
* options: optional
*/
const accordion = new Accordion(accordionItems, options)
Now you can access the object methods to programatically open, close, and toggle the accordion items based on the unique identifier.
// open accordion item based on id
accordion.open('accordion-example-heading-2')
// close accordion item based on id
accordion.close('accordion-example-heading-2')
// toggle visibility of item based on id
accordion.toggle('accordion-example-heading-3')
HTML Markup #
Use the following HTML markup example for the JavaScript script above.
<div>
<h2 id="accordion-example-heading-1">
<button
type="button"
class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
aria-expanded="true"
aria-controls="accordion-example-body-1"
>
<span>What is Tailwind?</span>
<svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</h2>
<div id="accordion-example-body-1" class="hidden" aria-labelledby="accordion-example-heading-1">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Tailwind is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and
more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to
<a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a>
and start developing websites even faster with components on top of Tailwind CSS.
</p>
</div>
</div>
<h2 id="accordion-example-heading-2">
<button
type="button"
class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
aria-expanded="false"
aria-controls="accordion-example-body-2"
>
<span>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</h2>
<div id="accordion-example-body-2" class="hidden" aria-labelledby="accordion-example-heading-2">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Tailwind is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our
Figma file.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out the
<a href="https://www.larntocode.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a>
based on the utility classes from Tailwind CSS and components from Tailwind.
</p>
</div>
</div>
<h2 id="accordion-example-heading-3">
<button
type="button"
class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
aria-expanded="false"
aria-controls="accordion-example-body-3"
>
<span>What are the differences between Tailwind and Tailwind UI?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</h2>
<div id="accordion-example-body-3" class="hidden" aria-labelledby="accordion-example-heading-3">
<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">
The main difference is that the core components from Tailwind are open source under the MIT license, whereas Tailwind UI is a paid product.
Another difference is that Tailwind relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
However, we actually recommend using both Tailwind, Tailwind Pro, and even Tailwind UI as there is no technical reason stopping you from using
the best of two worlds.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
<li>
<a href="https://www.larntocode.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind Pro</a>
</li>
<li>
<a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a>
</li>
</ul>
</div>
</div>
</div>