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

Last Updated : 24 Apr, 2025

When building web pages, presenting large amounts of text in a concise and user-friendly manner is essential for a positive user experience. One popular way to achieve this is by implementing a "Show More" and "Show Less" functionality.

"Show More / Show Less" lets you hide long text and reveal it when a button is clicked. JavaScript is used to switch the text visibility and update the button label when clicked.

What We Are Going to Create

We will build a simple feature that hides extra text and reveals it only when the user clicks a button. The application will include:

A clean and responsive design.
A paragraph of text with hidden content.
A button to toggle between showing more or less text.
Smooth transitions to improve user experience.

Project Preview:

HideShow — Show More and Show Less functionality

Show More and Show Less - HTML and CSS Code

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <h3>Show More / Show Less Example</h3>

        <p class="text-content">
            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>
            <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 is: if you're looking for a problem to
                work on, just look around yourself.
            </span>
        </p>
        <button id="textButton" onclick="toggleText()">Show More</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

style.css

/* Reset + Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  /* Container Styling */
  .container {
    background-color: #ffffff;
    padding: 40px 30px;
    border-radius: 12px;
    max-width: 600px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  
  /* Headings */
  h1 {
    color: #2e8b57;
    margin-bottom: 10px;
  }
  
  h3 {
    margin-bottom: 20px;
    color: #555;
  }
  
  /* Paragraph */
  .text-content {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 25px;
  }
  
  /* Button Styling */
  button {
    background-color: #2e8b57;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  button:hover {
    background-color: #246b45;
  }
  
  /* Hidden text */
  #moreText {
    display: none;
  }

In this Code:

The <div> with class container wraps and organizes all the UI elements.
<h1> displays the main title "GeeksforGeeks".
<p> with class text-content shows a short description with hidden extended text.
<span id="points">...</span> indicates more content is hidden.
<span id="moreText"> contains the extra text that will be shown/hidden.
<button> with id="textButton" lets the user toggle between showing and hiding the extended text.

Show More and Show Less - JavaScript

JavaScript

function toggleText() {
    const points = document.getElementById("points");
    const moreText = document.getElementById("moreText");
    const button = document.getElementById("textButton");
  
    const isHidden = moreText.style.display === "none";
  
    moreText.style.display = isHidden ? "inline" : "none";
    points.style.display = isHidden ? "none" : "inline";
    button.innerHTML = isHidden ? "Show Less" : "Show More";
 }

In this code:

toggleText() is a function that runs when you click the button.
It grabs three elements from the page:
points (the "..."),
moreText (the hidden extra text),
and button (the one you click).
It checks if the extra text is currently hidden.
If it's hidden, it shows the extra text, hides the "...", and changes the button text to "Show Less".
If it's already showing, it hides the extra text, shows the "...", and changes the button text back to "Show More".

Conclusion

Creating a "Show More" and "Show Less" functionality using JavaScript is simple yet effective in enhancing the usability of your website. By following the steps above, you can easily manage long blocks of text, improving your users' experience. With a little bit of CSS and JavaScript, you can add a toggle button that allows users to reveal or hide additional content as needed, keeping your pages neat and user-friendly.

How to Toggle between Hiding and Showing an Element using JavaScript ?

deepak710agarwal

Improve

Article Tags :

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

What We Are Going to Create

Project Preview:

Show More and Show Less - HTML and CSS Code

Show More and Show Less - JavaScript

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?