jQuery & CSS Read More/Less Content Toggle
In this article, we going to see how to do Read More/Less content toggle using jQuery & CSS. Instead of showing all the contents in one place, we can hide the content for the particular height which we like. After that, we can show and hide content with the read more/less button.
Here we going to use two methods one by using #jQuery and another with #CSS, you can use any one of these methods on your website.
Using jQuery Read More/Less Content Toggle
If you already using the JavaScript library on your website, then it is simple to use the slideToggle function to execute the read more/less option for your content. Use the below code to get the jQuery read more/less option.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery & CSS Read More/Less Content Toggle</title> <style> .read-more-content { display: none; padding-top: 12px; } .read-more-btn { margin-top: 5px; background: #000; color: #fff; border-radius: 3px; border: none; padding: 5px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $(document).ready(function () { $(".read-more-btn").click(function () { $(this).prev().slideToggle(); if ($(this).text() == "Read More") { $(this).text("Read Less"); } else { $(this).text("Read More"); } }); }); </script> </head> <body> <div class="status-meeting"> <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </span> </div> <div class="read-more-content"> <span> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </span> </div> <button class="read-more-btn" title="Read More">Read More</button> </body> </html> |
Use the below option to preview the code or download it.
Using CSS Read More/Less Content Toggle
CSS provides more options like jQuery using that we going to do the read more/less option. Instead of dupping more scripts, CSS provides beautiful same options using that we can create read more/less content toggle and maintain the website performance. Use the below code to execute the read more/less option on your website.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery & CSS Read More/Less Content Toggle</title> <style> .read-more-container { border: 1px solid #e6e6e6; border-radius: 6px; padding: 10px; box-shadow: 1px 6px 15px 1px #e4e4e480; } .read-more-input { position: fixed; clip: rect(1px, 1px, 1px, 1px); } .read-more-input ~ .read-more-content { max-height: 4.5em; } .read-more-input:checked ~ .read-more-content { max-height: 100em; } .read-more-input ~ .read-more-btn:after { content: "Read More \0BB"; } .read-more-input:checked ~ .read-more-btn:after { content: "Read Less \0AB"; } .read-more-content { position: relative; overflow: hidden; -moz-transition: max-height 0.4s ease-in-out; -webkit-transition: max-height 0.4s ease-in-out; transition: max-height 0.4s ease-in-out; max-height: 100%; } .read-more-btn { display: block; margin: 0 auto; text-align: center; width: 100px; padding: 3px; margin-top: 20px; color: #2196f3; cursor: pointer; border: 1px solid #2196f3; border-radius: 3px; } </style> </head> <body> <div class="read-more-container"> <input type="checkbox" id="read-more-box" class="read-more-input" /> <section class="read-more-content"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </p> </section> <label for="read-more-box" class="read-more-btn"></label> </div> </body> </html> |
Using the below option to Preview or Download
Conclusion:
I hope anyone of this method helps you to do the read more/less option on your website. If you have any doubts about this topic use the below comment box to let me know. If the like this article share it with your friends.
