There are instances in Website-Development when you need to create a webpage in which we need to describe a product or show reviews of a product and sometimes even display a glimpse of a post.
The Read More or View More or Show More button comes handy in that situation.
This article helps you in creating such a Read More and Read Less Button.
We will wrap our text within a paragraph tag and create few elements within the paragraph tag which have an id attribute that will later be used by JS function and create a button which invokes the JS function.
Using CSS we can hide the span which contains our extra text(using display:none).
The readMore() function holds the entire logic to hide and display the extra text. In this function, we get the reference of useful HTML elements using DOM.
Using the following snippets you can try out this example.