Hello friends, how are you and I hope you are well and safe in this pandemic. So in this article and video, we will do how to expand and collapse text (in other words read more read less text button). I know you guys must have seen many such videos and articles and also seen in many websites how if any people show description text in short then there will be a button in it, read more and you click on it. So, what your description text is, it gets detailed.
Read less to read text button (how to change text, enlarge, and collapse text) You can do this with the help of many techniques like HTML, CSS, and JavaScript, you can do it both statically and dynamically. And you also come with several jQuery plugins. You can also do this. But we are going to do it in this video and article in a stable way, that too in a very easy way and it will not take your time to understand and you can integrate it in your website very easily. We are going to do this with the help of HTML, CSS, and jQuery.
If you want to copy this code, first you have to create three files. First index.html, second style.css, and third script.js these three files have to be created in one specific folder.
You might also like this tutorial
Scroll To Top Button (Back To Top) Using Simple JAVASCRIPT | Click to Scroll Top | CSS Smooth Scroll
Brand Logo Slider Using Html, CSS & jQuery Slick Carousel Tutorial
Random Password Generator Small Web App In jQuery | HTML, CSS & JQUERY TUTORIAL
How to make draggable elements in jquery UI | Living room design with light on,off
index.html In this file, I have created a complete structure in which there is a div named box. Inside this, I have taken an image, a div, and a button. This is the structure you have to copy in your index.html file.
style.css This file contains the code for the complete design. In which I have fixed the height to the class of newDive and have given overflow hidden. Due to which we will see the work of the description text. Hover the button on Reed More.
script.js This file contains the complete jQuery code. in which I
On click, the function has been used and in this function the read more button has been targeted. Inside this function, the function of toggle class has been added i.e. when you click on the read more button, then a class can be added and removed in the div named box (the class name is content). After this, I have taken the variable of replacing text, in which the text of the read more button is changed to be read less. And when you click on the top of the read less, then the text of read more should show i.e. replace. You just have to do these three things and your work will be done.
Read More Read Less Button In Jquery Source Code
As I told above, how can you copy the code and if you want to integrate it in any website then you have to follow these steps and keep the structure in the same way and if there is any problem then I have given the video link you can watch. You can see that too. If you have any questions then you can ask me by commenting.
If I talk about the plugin, then many of its plugins come, I will attach some of its links below, you can use it. And I want to tell you one more thing that I have not used any 3rd party plugin in this functionality which I have created, it is only made with the help of HTML, CSS, jquery, so if you want to use it then you can also do it.
If you like my videos then please write and share and if you liked the article then do comment below. You can also follow my LearnDesign youtube channel to see similar videos. I keep putting weekly videos in it. Take care and bye.
