The latest articles on DEV Community by Laur.Rvt (@laurrvt). https://dev.to/laurrvt https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F549382%2F428b5940-1ac1-4e5e-b944-6fb730dbdf42.jpg https://dev.to/laurrvt en Laur.Rvt Wed, 26 May 2021 19:00:35 +0000 https://dev.to/laurrvt/read-more-read-less-functionality-with-vue-3km0 https://dev.to/laurrvt/read-more-read-less-functionality-with-vue-3km0 <p>Hi!<br> In this post I am going to show you a simple way to do a Read More/Read Less functionality in vue.js.</p> <p>One way to do that is to have two divs that will store both versions of the text (the long and the short one) but that is working only if we work with static texts.</p> <p>This is a working version of that functionality using a variable in which will be stored our text:<br> <a href="https://codesandbox.io/s/eager-kowalevski-u406b?file=/src/App.vue">https://codesandbox.io/s/eager-kowalevski-u406b?file=/src/App.vue</a></p> <p>The idea is pretty simple. I just have a bool variable named "readMore" which will control displaying of Read More and Read Less buttons. Also, using readMore ,I give to div that stores the text a new class named "readLess" which have it own styles.<br> Hope it was useful for you. If you have any questions or suggestions, feel free to text me about that :)</p> vue javascript html css