Open In App
Related Articles

How to create Show More and Show Less functionality for hiding text using JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

A Show More and Show Less functionality can be useful in websites that are heavy in text, like news and magazine websites that contain a lot of articles on a single page. This can help the web page designer to give the user the freedom to read more or less text as needed. 

Approach: The amount of content displayed can be changed by clicking on the buttons. Instead of showing a complete paragraph on a webpage, only some part of the text is shown initially and a button is added that shows more of the text. The amount of text that should be displayed after and before they click on a button can be decided by the developer.

Example: The above approach can be implemented by using a simple if-else condition that checks the current status of the text and shows or hides it on that basis. The below example illustrates this method:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to create Show More and Show Less
        functionality for hiding text using JavaScript ?
    </title>
    <style>
        /* Initially, hide the extra text that
            can be revealed with the button */
        #moreText {
 
            /* Display nothing for the element */
            display: none;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>Show More and Show Less Example</h3>
 
    <p>
        GeeksforGeeks was born out of necessity-
        a need to provide a convenient and
        one-stop educational portal to all the
        students of Computer Science.
        <span id="points">...</span>
 
        <!-- Define the text that would be
                hidden by default and only shown
                when clicked on the button -->
        <span id="moreText"> This necessity was
            as personal to me as it was universal.
            This need combined with my passion for
            teaching resulted in GeeksforGeeks as
            we know today. My message to you, in
            our inaugural edition of Geeks Digest,
            would be that if you are looking for
            a problem to work on, you don’t need
            to look very far for it. All you should
            do is to look around yourself.
        </span>
    </p>
 
 
    <!-- Trigger toggleText() when the
            button is clicked -->
    <button onclick="toggleText()" id="textButton">
        Show More
    </button>
 
    <script>
        function toggleText() {
 
            // Get all the elements from the page
            let points =
                document.getElementById("points");
 
            let showMoreText =
                document.getElementById("moreText");
 
            let buttonText =
                document.getElementById("textButton");
 
            // If the display property of the dots
            // to be displayed is already set to
            // 'none' (that is hidden) then this
            // section of code triggers
            if (points.style.display === "none") {
 
                // Hide the text between the span
                // elements
                showMoreText.style.display = "none";
 
                // Show the dots after the text
                points.style.display = "inline";
 
                // Change the text on button to
                // 'Show More'
                buttonText.innerHTML = "Show More";
            }
 
            // If the hidden portion is revealed,
            // we will change it back to be hidden
            else {
 
                // Show the text between the
                // span elements
                showMoreText.style.display = "inline";
 
                // Hide the dots after the text
                points.style.display = "none";
 
                // Change the text on button
                // to 'Show Less'
                buttonText.innerHTML = "Show Less";
            }
        }
    </script>
</body>
</html>

                    

Output:



Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads