Create a Read More Read Less Button using HTML CSS and JavaScript

Last Updated : 18 Jan, 2024

The “read more – read less” button is a commonly used feature that enhances user experience by providing a convenient way to reveal or hide content. The article covers two distinct approaches, including Display Inline and Display Block.

Table of Content

Using Display Inline
Using Display Block

Using Display Inline

Create a separate HTML, CSS, and JavaScript files. Then, integrate the external stylesheet and JavaScript file into the HTML document.
Make a basic structure of the web page using <h1>, <button>, and different HTML elements.
The text inside the element <div> contains a description whereas, the text inside the element <span> contains the additional content. Initially, the element span is set to the property (display: none) to hide it.
Then, Make a JavaScript function changeReadMore() that is triggered when the user clicks the “Read More” button. It toggles the display property of .mybox1 between ‘none’ and ‘inline’, making it visible or hidden.

Example: Illustrating the “read more – read less” button using Display Inline CSS Property.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>Read more read less button</title> 
    <link rel="stylesheet" 
          href="style.css"> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>A "read more - read less" 
        button using JavaScript. 
    </h3> 
    <div class="mybox"> 
        <div> 
            A data structure is not only used 
            for organizing the data. It is also 
            used for processing, retrieving, and 
            storing data.<span id="span1">...</span> 
            <span class="mybox1" id="mybox1id"> 
                There are different basic and advanced 
                types of data structures that are used 
                in almost every program or software 
                system that has been developed. 
                So we must have good knowledge about 
                data structures. 
            </span> 
        </div> 
        <button id="mybuttonid" 
                onclick="changeReadMore()"> 
            Read More 
        </button> 
    </div> 
  
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* style.css*/
h1 { 
    color: green; 
} 
  
h3 { 
    color: blue; 
    font: 25px; 
    font-weight: 700; 
} 
  
.mybox1 { 
    display: none; 
} 
  
button { 
    padding: 10px; 
    font-size: 20px; 
    font-weight: 700; 
    color: rgb(5, 14, 5); 
    border: none; 
    border-radius: 30px; 
    background-color: rgb(182, 215, 182); 
    margin-top: 20px; 
} 
  
div, 
span { 
    font-size: 20px; 
}

Javascript

// script.js 
function changeReadMore() { 
    const mycontent = 
        document.getElementById('mybox1id'); 
    const mybutton = 
        document.getElementById('mybuttonid'); 
    const span1 = document.getElementById("span1") 
  
    if (mycontent.style.display === 'none'
        || mycontent.style.display === '') { 
        mycontent.style.display = 'inline'; 
        span1.style.display = "none"; 
        mybutton.textContent = 'Read Less'; 
    } else { 
        mycontent.style.display = 'none'; 
        mybutton.textContent = 'Read More'; 
        span1.style.display = "inline"; 
    } 
} 

Output:

rmrl

Using Display Block

Create a separate HTML, CSS, and JavaScript files. Then, integrate the external stylesheet and JavaScript file into the HTML document.
Structure the web page using <h1>, <button>, and different HTML elements. Style them through various CSS properties including color, background-color, margin, etc.
The text inside the element <div> contains a description whereas, the text inside the element <span> contains the additional content. Initially, the element span is set to the property (display: none) to hide it.
Then, Make a JavaScript function changeReadMore() that is triggered when the user clicks the “Read More” button. It toggles the display property of .mybox1 between ‘none’ and ‘block’, making it visible or hidden.
The display: block CSS property is used to present additional content on a new line for improved readability.

Example: Illustrating the “read more – read less” button using Display Block CSS Property.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>Read more read less button</title> 
    <link rel="stylesheet" 
          href="style.css"> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>A "read more - read less" 
        button using JavaScript and CSS 
        display block property. 
    </h3> 
    <div class="mybox"> 
        <div> 
            A data structure is not only used 
            for organizing the data. It is also 
            used for processing, retrieving, and 
            storing data. 
            <span class="mybox1" id="mybox1id"> 
                There are different basic and advanced 
                types of data structures that are used 
                in almost every program or software 
                system that has been developed. 
                So we must have good knowledge about 
                data structures. 
            </span> 
        </div> 
        <button id="mybuttonid" 
                onclick="changeReadMore()"> 
            Read More 
        </button> 
    </div> 
  
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* style.css */
h1 { 
    color: green; 
} 
  
h3 { 
    color: rgb(129, 25, 25); 
    font: 25px; 
    font-weight: 700; 
} 
  
.mybox1 { 
    display: none; 
} 
  
button { 
    padding: 10px; 
    font-size: 20px; 
    font-weight: 700; 
    color: rgb(5, 14, 5); 
    border: none; 
    border-radius: 30px; 
    background-color: rgb(182, 215, 182); 
    margin-top: 20px; 
} 
  
div, 
span { 
    font-size: 20px; 
}

Javascript

// script.js 
function changeReadMore() { 
    const mycontent = 
        document.getElementById('mybox1id'); 
    const mybutton = 
        document.getElementById('mybuttonid'); 
  
    if (mycontent.style.display === 'none'
        || mycontent.style.display === '') { 
        mycontent.style.display = 'block'; 
        mybutton.textContent = 'Read Less'; 
    } else { 
        mycontent.style.display = 'none'; 
        mybutton.textContent = 'Read More'; 
    } 
}