Read More and Read Less Using JavaScript

This tutorial will guide you through the process of implementing a “Read More” and “Read Less” functionality using JavaScript. This feature is extremely useful for truncating long text blocks and providing a way for users to expand and collapse the content, improving readability and user experience on your web pages.

Project Setup

Add Header Assets

Creating the HTML Structure

First, we need to set up the HTML structure for our content. This includes the initial text, the hidden text that will be revealed, and the button that toggles the visibility.

<section>
    <p>In a shocking finding, scientists discovered a herd of unicorns living in a remote, previously unexplored valley in the Andes Mountains. Even more surprising to the researchers was the fact that the unicorns spoke perfect English.
        <span id="dots">...</span>
    </p>
    <p id="more" class="hidden">One female unicorn was especially friendly, and the researchers were able to communicate with the animals. They even named her. Scientists recently discovered the first recorded herd of wild, free-ranging unicorns in Ecuador. The researchers were amazed to see the beautiful creatures, and it was especially surprising that the animals were friendly.

        Since their discovery, the unicorns have begun to slowly be released back into the wild, though one female is still being kept as a research subject.</p>
    <button id="toggleReadMore">Read more</button>
</section>
    <script  src="./script.js"></script>

Styling with CSS

Next, we’ll apply some CSS to style the text, the “hidden” class, and the button to ensure it looks appealing and functions correctly on your webpage.

body {
    font-family: system-ui, -apple-system, sans-serif;
}

.hidden {
    display: none;
}

p {
    width: 400px;
    margin: 0;
    padding: 0;
    display: block;
}

html {
    height: 100%;
}

/* button styles, not necessary */
button {
    border: 0;
    background: #2266ff;
    color: white;
    padding: 9px 15px;
    border-radius: 7px;
    transition: 0.2s;
    display: block;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

button:hover {
    scale: 1.01;
    opacity: 0.9;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

button:active {
    scale: 0.99;
    box-shadow: 0 0 0 transparent;
}

Implementing the JavaScript Logic

Now, let’s add the JavaScript code that will handle the “Read More” and “Read Less” functionality. This code will toggle the visibility of the hidden text when the button is clicked.

let toggle = document.querySelector("#toggleReadMore"),
    more = document.querySelector("#more"),
    dots = document.querySelector("#dots"),
    isExpanded = false;

toggle.onclick = toggleReadMore;

function toggleReadMore() {
    more.classList.toggle("hidden");
    dots.classList.toggle("hidden");
    toggle.innerText = isExpanded ? "Read less" : "Read more"
    isExpanded = !isExpanded;
}

Add Footer Assets

Conclusion

That’s it! You have successfully implemented a “Read More” and “Read Less” feature using HTML, CSS, and JavaScript. This enhances user experience by allowing them to control the amount of content they see, making long text blocks more manageable.