I am working in version 4.5 and I want to add a read more button on the category page. now I have a lot of text for google search but the customer need to scroll a lot before they are seeing the products they need to buy. Is there an easy way to implement this?
<div class="text-container"> <p class="text"> <!-- Your text content here --> </p> <button class="read-more">Read More</button> </div>
give fixed height to the div
<style> .text { overflow: hidden; max-height: 5 * 1.2em; /* 5 lines at 1.2em (line height) per line */ white-space: nowrap; text-overflow: ellipsis; } </style>
write jquery code to view more
<script> $(document).ready(function () { $(".read-more").click(function () { var textContainer = $(this).closest(".text-container"); var text = textContainer.find(".text");
// Toggle the "read more" and "read less" text if (text.hasClass("expanded")) { text.removeClass("expanded"); text.css("max-height", "5 * 1.2em"); $(this).text("Read More"); } else { text.addClass("expanded"); text.css("max-height", "none"); $(this).text("Read Less"); } }); }); </script>
One other question regarding this topic, do I need to change this anywhere else to get it working on mobile as well. I see the read more and read less, but when I toggle read more the extra text does not coming up. it keep the same.