Read More and Read Less using JavaScript

This code enables you to implement “Read More” and “Read Less” functionality in your webpage using JavaScript. It hides and reveals text content to provide a concise view initially and a detailed view upon user interaction. It helps improve user experience when displaying lengthy content.

Furthermore, you can use this code in your website or web application to make long text content more user-friendly. It allows users to see a brief summary initially, reducing clutter and improving UX. When they want more details, they can click “Read more,” enhancing the overall user experience.

How to Create Read More And Read Less Using Javascript

1. In your HTML file, create a section or container where you want to apply the “Read More” functionality. Place the content you want to toggle between “Read more” and “Read less” within paragraph tags (<p>). Additionally, include a button with a unique ID, like “toggleReadMore,” which users will click to trigger the toggle.

<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>

2. In your CSS file, apply styles to the HTML elements for better presentation. You can customize the styles according to your website’s design, but ensure that the “hidden” class initially hides the additional content.

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;
}

3. In your JavaScript file, define the logic to toggle the visibility of the “Read more” and “Read less” content when the button is clicked. This code uses event listeners to track the button click and toggles the “hidden” class to control visibility.

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;
}

That’s it! You’ve successfully implemented “Read More” and “Read Less” functionality on your website. This user-friendly feature improves content readability and enhances the overall user experience. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.