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.
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:
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';
}
} |
Output: