Read More and Read Less using JavaScript

Read More and Read Less using JavaScript
Code Snippet:Read More, Read Less Button
Author: nl03
Published: January 21, 2024
Last Updated: January 22, 2024
Downloads: 1,019
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X