coverkitchen Posted January 18, 2021 Share Posted January 18, 2021 Site URL: https://coverkitchen.com/ Hi, Everyone I have managed to add a Read More link to a text using a combination of HTML in a code block as text and adding a Jquery code to the page. The problem is that the Jquery ignores line breaks and styles applied in the HTML code. So the <br> and <i> will not work after the Jquery script loads. Is there any way to fix this adding a code line to the Jquery? If this is fixed, I am sure many users will find this code to be very useful. See my current Jquery for the Read More link is below: Many thanks in advance! <script> function AddReadMore() { //This limit you can set after how much characters you want to show Read More. var carLmt = 250; // Text to show when text is collapsed var readMoreTxt = " ... Read More"; // Text to show when text is expanded var readLessTxt = " Read Less"; //Traverse all selectors with this class and manupulate HTML part to show Read More $(".addReadMore").each(function() { if ($(this).find(".firstSec").length) return; var allstr = $(this).text(); if (allstr.length > carLmt) { var firstSet = allstr.substring(0, carLmt); var secdHalf = allstr.substring(carLmt, allstr.length); var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore' title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>"; $(this).html(strtoadd); } }); //Read More and Read Less Click Event binding $(document).on("click", ".readMore,.readLess", function() { $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent"); }); } $(function() { //Calling function after Page Load AddReadMore(); }); </script> <style> .addReadMore.showlesscontent .SecSec, .addReadMore.showlesscontent .readLess { display: none; } .addReadMore.showmorecontent .readMore { display: none; } .addReadMore .readMore, .addReadMore .readLess { font-weight: bold; margin-left: 2px; color: black; cursor: pointer; } .addReadMoreWrapTxt.showmorecontent .SecSec, .addReadMoreWrapTxt.showmorecontent .readLess { display: block; } </style> Link to comment
tuanphan Posted January 20, 2021 Share Posted January 20, 2021 Which page did you add read more? I don't see it on homepage Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment