How to use Display Block In Javascript
- 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 >w3wiki</ 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 */ h 1 { color : green ; } h 3 { color : rgb ( 129 , 25 , 25 ); font : 25px ; font-weight : 700 ; } .mybox 1 { 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:
Create a Read More Read Less Button using HTML CSS and JavaScript
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