Tailwind CSS: How to create accordions (collapsible content)

Last updated on June 4, 2022 Pennywise Loading... Post a comment

This succinct and straight-to-the-point article shows you how to create accordions (collapsible content) with only Tailwind CSS (without any Javascript).

Overview

In the world of web development, an accordion can be expanded or collapsed to show or hide long content. It consists of a header (or summary section) that displays a brief title and a body that contains detailed information. A user can click on the header to toggle between hiding and showing the body.

By using two HTML tags <summary> and <details> in combination with Tailwind CSS, we can make interactive and vivid accordions from scratch. With the open modifier, we can conditionally add styles when a <details> element is in the open state.

If you get bored with this instruction, see the practical example below.

Example

Preview

This example creates a FAQ (frequently asked questions) section, which can be found on mode websites today.

The Code

<body class="bg-purple-700">
    <div class="mx-auto my-20 w-[600px] drop-shadow rounded-md">
        <h1 class="text-2xl font-italic font-light text-center text-white mb-10">KindaCode.com - FAQ</h1>

        <!-- The First FAQ -->
        <details class="bg-gray-300 open:bg-amber-200 duration-300">
            <summary class="bg-inherit px-5 py-3 text-lg cursor-pointer">The first requently asked question</summary>
            <div class="bg-white px-5 py-3 border border-gray-300 text-sm font-light">
                <p>Praesent posuere nisi vel diam congue varius. Praesent lacus nulla, congue nec rhoncus nec,
                    suscipit et enim. Donec ultrices nec arcu et pharetra.</p>
            </div>
        </details>

        <!-- The Second FAQ -->
        <details class="bg-gray-300 open:bg-amber-200 duration-300">
            <summary class="bg-inherit px-5 py-3 text-lg cursor-pointer">Just another question</summary>
            <div class="bg-white px-5 py-3 border border-gray-300 text-sm font-light">
                <p>Just some dummy content. Just some dummy content. Just some dummy content. Just some dummy content
                    Just some dummy content. Just some dummy content</p>
            </div>
        </details>

        <!-- The Third FAQ -->
        <details class="bg-gray-300 open:bg-amber-200 duration-300">
            <summary class="bg-inherit px-5 py-3 text-lg cursor-pointer">How is the weather today?</summary>
            <div class="bg-white px-5 py-3 border border-gray-300 text-sm font-light">
                <ul>
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                </ul>
            </div>
        </details>

    </div>
</body>

Conclusion

You’ve learned how to create expansible/collapsible content with Tailwind CSS. This technique is useful when you want to present a large amount of information but still want to save space. If you’d like to explore more new and interesting stuff about frontend development, take a look at the following articles:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles