Tailwind CSS: Creating a Read More/Read Less Button

Updated: July 5, 2022 By: Pennywise Post a comment

In this tutorial, we’ll go over a full example of creating a Read More/Read Less button by using Tailwind CSS in combination with a few lines of vanilla Javascript.


The demo webpage we’re going to make some text. In the beginning, only a few first words show up. After this is three dots. The long text afterward can be seen (thanks to the hidden utility class). When the Read More button is clicked, all content is visible while the three dots go away. Moreover, the text of the button changes from Read more to Read less.

When the Read less button is clicked, everything happens in reverse. Here’s how it works in action:

The Code

Here’s the code with explanations in the comments:

<body class="p-20">
    <div class="p-5 bg-amber-200">
        <h1 class="mb-3 text-4xl font-light">Welcome to KindaCode.com</h1>

        <!-- This text always show up -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
            lorem egestas vitae scel

            <!-- The three dots -->
            <span id="dots">...</span>

            <!-- This content only be shown as needed -->
            <span id="more" class="hidden">erisque enim ligula
                venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
                vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In libero
                sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer
                fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.

        <!-- Implement the read more/read less button -->
        <button onclick="toggleText()" id="button"
            class="mt-3 px-5 py-2 bg-rose-500 text-white duration-300 hover:bg-rose-700">Read

    <!-- Javascript code -->
        function toggleText() {
            var dots = document.getElementById("dots");
            var moreText = document.getElementById("more");
            var button = document.getElementById("button");

            if (dots.classList.contains("hidden")) {
                // Show the dots

                // Hide the more text

                // change text of the button
                button.innerHTML = "Read more";
            } else {
                // Hide the dots

                // hide the more text

                // change text of the button
                button.innerHTML = "Read less";


We’ve examined a complete example of implementing a Read More/Read Less button with Tailwind CSS and pure Javascript. This is nice but can still be improved. You can do so on your own and make changes to the code as necessary.

If you’d like to explore more new and fascinating stuff about modern web technologies by taking a look at the following articles:

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

Related Articles