Implementing Readmore and Readless using JQuery

We all want our website to be dynamic and for that we use javascript.

Jquery is a best way of implementing js and dynamic websites.

Without wasting time lets proceed-:

So for implementing Readmore and Readless using JQuery we have to do some changes in our main content.

Step 1: Add a readmore anchor tag.

Step 2: Add a span class which will be hidden and shown.

Step 3: Make a new class hide which when add to any tag will make display none.

Step 4: Add another tag readless anchor tag, that will hide the data again.

Step 5: lets see.

Initially I thought of adding code here, but its better to add code in some online ide so that you guys can see that live implementation with the result you will get.

https://jsfiddle.net/1es18y81/

MY JS FIDDLE LINK

//jsfiddle.net/1es18y81/embedded/js,html,css,result/dark/