Photo by Miguel Á. Padriñán from Pexels
Although I went deep into HTML, completing the www.W3schools.com free course, I somehow forgot about the great option HTML provide out of box with regards to “Read more…” button, very useful feature for lengthy articles.
HTML <details> and <summary> option:
Here comes the handy HTML tags <details> and <summary>, with summary being a child of . The Summary tag has a useful attribute of "open", which will keep the modal open and display the long content <summary open>.
A live example below:
<h1> Some great headline</h1>
<details open>
<summary>Read More....</summary>
<p>Some extremely long content… Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quisquam odit quas vitae, inventore fugit voluptatibus ratione commodi accusamus in deserunt assumenda quis quam voluptas quod unde alias nobis distinctio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis rerum, dolore blanditiis nesciunt accusamus, debitis asperiores quis inventore sequi numquam, odio illum natus molestiae hic minima? Praesentium,quia. Cum, iusto!
</p>
</details>
JavaScript option:
The JavaScript option involves a little more code only to achieve similar result.
The HTML part:
<h1> Some great headline</h1>
<p>Some extremely long content <span id="readLess">. . . </span> <span id="readMore">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quisquam odit quas vitae, inventore fugit voluptatibus ratione commodi accusamus in deserunt assumenda quis quam voluptas quod unde alias nobis distinctio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis rerum, dolore blanditiis nesciunt accusamus, debitis asperiores quis inventore sequi numquam, odio illum natus molestiae hic minima? Praesentium,quia. Cum, iusto.</span>
</p>
<button onclick="readMore()" id="morebtn">Read more</button>
Adding CSS:
#readMore{display:none;}
Finally, the Javascript part:
function readMore() {
let readLess = document.getElementById("readLess");
let readMore = document.getElementById("readMore");
let moreBtn = document.getElementById("morebtn");
if (readLess.style.display === "none") {
readLess.style.display = "inline";
moreBtn.innerHTML = "Read more";
readMore.style.display = "none";
} else {
readLess.style.display = "none";
moreBtn.innerHTML = "Read less";
readMore.style.display = "inline";
}
}
That’s all folks! That was my first article since I started learning Front End Development, I hope it will be useful for less experienced developers.
What is your favorite use in this case HTML or JavaScript? Please leave comments below.
Full example code below:
https://codepen.io/furbo1/pen/rNeQJVq
Top comments (1)
Thank you so much for this it works and it is very easy to understand