You can create an accordion component without using Javascript or frameworks of Javascript. HTML provides an accordion component by default that we can style using TailwindCSS.
Creating Basic Accordion with TailwindCSS
First, let’s add a simple FAQ accordion with details and summary tags. This will be a simple but boring accordion. So, with TailwindCSS, adding some basic styles will make the accordion look good on the page. Here is a simple accordion styled with TailwindCSS and a working demo on the tailwind playground.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="flex items-center justify-center h-screen "> <div class="w-full px-8 mx-auto mt-20 space-y-2 lg:max-w-md"> <details class="p-4 rounded-lg"> <summary class="font-semibold bg-blue-200 px-4 py-2 text-lg cursor-pointer">Who is using TailwindCSS in production ?</summary> <div class=" bg-blue-100"> <p class="leading-6 px-3 py-2 text-gray-800"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint inventore dolore autem libero numquam. Cupiditate provident, quae eos accusamus dolor ea optio quia voluptate distinctio eligendi repudiandae officia doloremque nesciunt? </p> </div> </details> </div> </div> |
Adding More Content in Accordion.
Same as the above, details and summary tags can be used to add more content. Below, you can check the accordion with 3 FAQs.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div class="flex items-center justify-center h-screen "> <div class="w-full px-8 mx-auto mt-2 space-y-1 lg:max-w-md"> <details class=" rounded-lg"> <summary class="font-semibold bg-blue-200 px-4 py-2 text-lg cursor-pointer">Who is using TailwindCSS in production ?</summary> <div class=" bg-blue-100"> <p class="leading-6 px-3 py-2 text-gray-800"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint inventore dolore autem libero numquam. Cupiditate provident, quae eos accusamus dolor ea optio quia voluptate distinctio eligendi repudiandae officia doloremque nesciunt? </p> </div> </details> <details class=" rounded-lg"> <summary class="font-semibold bg-blue-200 px-4 py-2 text-lg cursor-pointer">What are the benefits of using TailwindCSS ?</summary> <div class=" bg-blue-100"> <p class="leading-6 px-3 py-2 text-gray-800"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint inventore dolore autem libero numquam. Cupiditate provident, quae eos accusamus dolor ea optio quia voluptate distinctio eligendi repudiandae officia doloremque nesciunt? </p> </div> </details> <details class=" rounded-lg"> <summary class="font-semibold bg-blue-200 px-4 py-2 text-lg cursor-pointer">Can I learn TailwindCSS without learning CSS ?</summary> <div class=" bg-blue-100"> <p class="leading-6 px-3 py-2 text-gray-800"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint inventore dolore autem libero numquam. Cupiditate provident, quae eos accusamus dolor ea optio quia voluptate distinctio eligendi repudiandae officia doloremque nesciunt? </p> </div> </details> </div> </div> |
The output of the above code will be an accordion with 3 different FAQs. Here is the working demo of the above code and the output snapshot is attached below.
Customizing the Default Icon of Accordion
You can change the default icon of the accordion with your custom styles. First, you need to hide the default market, second, you have to provide your own icon for open and closed states. In the tailwind input file, add the following code to change the default icon. Here is the working code snippet with a custom marker.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
@tailwind base; @tailwind components; @tailwind utilities; summary:first-of-type { list-style-type: none; } summary:after { border-radius: 5px; content: "+"; color: #000; float: left; font-size: 40px; font-weight: bold; margin: -7px 12px 0 0; padding: 0; text-align: center; width: 20px; height: 35px; display: flex; align-items: center; justify-content: center; } details[open] summary:after { content: "-"; font-size: 40px; } |
The output
after changing the default icon will look like the below screenshot.
Conclusion
You can design a beautiful accordion without using JavaScript or any other framework. TailwindCSS styles are very useful to design a nice-looking accordion component using the default HTML accordion. You can learn more about details tags in HTML.