Jump to content

Adding a Read More/Read Less link to any text using HTML and Jquery

Recommended Posts

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!


    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)

            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>";

        //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.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;


Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.