[Free Share] Apply read more button to squarespace content

Site URL: https://forum.squarespace.com/topic/203915-read-more-toggle-for-long-summary-reviews/#comment-493237

Hi guys, 

After a long time with Squarespace community,  I found that there is one issue that many people concern about - Making the Read more and Read less toggle for the long content. Therefore, today I would like to share my solution step by step to implement it on your own.

Let 's move to the cool part

Step 1: In the text block where you want to hide the content if it is too long, add the word with the setting link "#read-more" for it.

Step 2: Home > Settings > Advanced > Code Injection, choose the footer to add the codes

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/readmore.js@2.0.4/readmore.js"></script>
<script>
  $(document).ready(function() {
    if (window.self!==window.top) {
      return;
    }
    
    $("[href='#read-more']").each(function(i, el) {
      // First calculate the initial space between the content and the readmore tag   
      const contentEl = $(el).closest(".html-block, .sqs-block-content, .summary-excerpt, .image-subtitle");
      const elBound = (el.getBoundingClientRect());
      const contentBound = (contentEl[0].getBoundingClientRect());
      contentEl.readmore({ 
        collapsedHeight: Math.floor(elBound.y - contentBound.y),
        speed: 500,
        embedCSS: true, 
        lessLink: '<a href="#" data-action="collapse-rmjs">Read less</a>'
      })
    });

    $(document).on("click", "[data-action='collapse-rmjs']", function() {
      const readmoreId = $(this).attr("aria-controls");	

      const contentEl = $(`#${readmoreId}`);
      if($(contentEl).closest('.sqs-block-image').length) {
        contentBound = $(contentEl).closest('.sqs-block-image')[0].getBoundingClientRect();
      } else {
        const contentBound = (contentEl[0].getBoundingClientRect());
      }
      window.scrollTo(0, windown.scrollY + contentBound.top);
    });
  });       
</script>

<style>
  /* Tweak readmore js to hide the placeholder link */
  [id*=rmjs] {
    transition: height 200ms;
    overflow: hidden;
  }
  [id*=rmjs] [href='#read-more'] {
    display: none;
  }
  body.sqs-edit-mode [href='#read-more'] {
    display: inline-block !important;	
  }

  [data-readmore-toggle] {
    /* color of read more */
    color: red;
  }
</style>

Notice:  You can change the content in lessLink in my previous code to Less, hide,... any word you want to display when show full content

After applying 2 above steps, here is the result you can achieve

Is it hard for you to follow my steps? Does it work properly on your site?

If you have any question about this settings or get stuck implementing it, do not hesitate to share it with me.

'All roads lead to rome'. I hope my 'road' could be simple and helpful for our community

Thanks for your attention!

Support me by pressing 👍 if this useful for you

On my home page I have summary blocks for products. I would like to put a more/less button between blocks so that customers don't get overwhelmed by too many choices at one time. Most of the scripts I've seen have lots of references to galleries etc. Any suggestions on how I could use a more button to show/hide summary blocks? Thanks for any advice you have.

On 11/29/2021 at 9:27 AM, AllanArrow said:

I have summary blocks for products. I would like to put a more/less button between blocks so that customers don't get overwhelmed by too many choices

With the third party product 'Lazy Summaries' plugin (available from Squarewebsites) you can 'lazy load' the summary items and show a 'Load More' button to allow the user to show more items. You'll only need one Summary Block as you'll be able to load more than 30 items with one block. You can configure how many items are loaded when the button is clicked. 

Hi @bangank36

Thanks for your help on this. I’ve followed the steps carefully, but unfortunately it hasn't worked for me and I was wondering if there is an alternative method I can try? 

Update 15/01/2022: fix the effect when click read less button

On 1/11/2022 at 7:54 AM, Adam9 said:

Hi @bangank36

Thanks for your help on this. I’ve followed the steps carefully, but unfortunately it hasn't worked for me and I was wondering if there is an alternative method I can try? 

I've just updated code with some fix, kindly try it again on your site

Let me know how it works

i have used your code. i have issues 

Read more still there after clicking in the show less is showing 

and i want read more after each thousand words. like continue reading after limited amount of text

i have got the code but it is working only once i want after each 1000 words read more

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add Read More Link</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    var maxLength = 1000;
    $(".show-read-more").each(function(){
        var myStr = $(this).text();
        if($.trim(myStr).length > maxLength){
            var newStr = myStr.substring(0, maxLength);
            var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
            $(this).empty().html(newStr);
            $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
            $(this).append('<span class="more-text">' + removedStr + '</span>');
        }
    });
    $(".read-more").click(function(){
        $(this).siblings(".more-text").contents().unwrap();
        $(this).remove();
    });
});
</script>
<style>
    .show-read-more .more-text{
        display: none;
    }
</style>
</head>
<body>
    <p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam, laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Etiam tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum. Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam posuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lacus et metus semper porttitor. Sed pellentesque ex at pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus dignissim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpis. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. Integer eu dignissim lectus, commodo efficitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus. Curabitur blandit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euismod, elit elit tincidunt sem, ut consectetur arcu massa non diam. Etiam scelerisque nisi magna. Nulla facilisi. Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>

</body>
</html>

Hi @bangank36! How do I change the "Read More" and "Read Less" text to all caps? And also it cuts off weird on mobile, like there's a white block covering the bottom half of a line of text. Any idea how to fix that? Thanks!

7 hours ago, SSong said:

Hi @bangank36! How do I change the "Read More" and "Read Less" text to all caps? And also it cuts off weird on mobile, like there's a white block covering the bottom half of a line of text. Any idea how to fix that? Thanks!

Can you share your site with the site-wide password so I can take a look for the issue on mobile?

11 hours ago, bangank36 said:

Can you share your site with the site-wide password so I can take a look for the issue on mobile?

Here's the link, password is 12345. If you see it in mobile view, you'll see the cutoff I'm talking about

On 10/25/2021 at 11:48 AM, bangank36 said:

Site URL: https://forum.squarespace.com/topic/203915-read-more-toggle-for-long-summary-reviews/#comment-493237

Hi guys, 

After a long time with Squarespace community,  I found that there is one issue that many people concern about - Making the Read more and Read less toggle for the long content. Therefore, today I would like to share my solution step by step to implement it on your own.

Let 's move to the cool part

Step 1: In the text block where you want to hide the content if it is too long, add the word with the setting link "#read-more" for it.

 

Step 2: Home > Settings > Advanced > Code Injection, choose the footer to add the codes

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/readmore.js@2.0.4/readmore.js"></script>
<script>
  $(document).ready(function() {
    if (window.self!==window.top) {
      return;
    }
    
    $("[href='#read-more']").each(function(i, el) {
      // First calculate the initial space between the content and the readmore tag   
      const contentEl = $(el).closest(".html-block, .sqs-block-content, .summary-excerpt, .image-subtitle");
      const elBound = (el.getBoundingClientRect());
      const contentBound = (contentEl[0].getBoundingClientRect());
      contentEl.readmore({ 
        collapsedHeight: Math.floor(elBound.y - contentBound.y),
        speed: 500,
        embedCSS: true, 
        lessLink: '<a href="#" data-action="collapse-rmjs">Read less</a>'
      })
    });

    $(document).on("click", "[data-action='collapse-rmjs']", function() {
      const readmoreId = $(this).attr("aria-controls");	

      const contentEl = $(`#${readmoreId}`);
      if($(contentEl).closest('.sqs-block-image').length) {
        contentBound = $(contentEl).closest('.sqs-block-image')[0].getBoundingClientRect();
      } else {
        const contentBound = (contentEl[0].getBoundingClientRect());
      }
      window.scrollTo(0, windown.scrollY + contentBound.top);
    });
  });       
</script>

<style>
  /* Tweak readmore js to hide the placeholder link */
  [id*=rmjs] {
    transition: height 200ms;
    overflow: hidden;
  }
  [id*=rmjs] [href='#read-more'] {
    display: none;
  }
  body.sqs-edit-mode [href='#read-more'] {
    display: inline-block !important;	
  }

  [data-readmore-toggle] {
    /* color of read more */
    color: red;
  }
</style>

Notice:  You can change the content in lessLink in my previous code to Less, hide,... any word you want to display when show full content

 

After applying 2 above steps, here is the result you can achieve

 

Is it hard for you to follow my steps? Does it work properly on your site?

If you have any question about this settings or get stuck implementing it, do not hesitate to share it with me.

'All roads lead to rome'. I hope my 'road' could be simple and helpful for our community

Thanks for your attention!

Support me by pressing 👍 if this useful for you

I followed your instructions, and the show/hide feature works, but the block does not resize. that means there is a large empty space below the text where "read more" would reveal it. 

Hi there, I'm very familiar with CSS/HTML but still quite a novice at jquery. aside from Step 1 and Step 2, how do I or where do I install the readmore.js plugin. And what else do I need to make this code work for my 'read more' function?

Note: I am trying to use this in a carousel component for client reviews.

Any help would be appreciated!

Thanks,

Stu

@Beyondspace Thank you for sharing this! I attempted this on my 7.1 site for a client and it doesnt seem to be working? The image is me testing it out first, but read more still shows. On a hard refresh it appears to work but not once it loads. Any idea on this?

Hi @Beyondspace!

Thanks for adding this in. I'm having some troubles adding the show more/less tag into the new updated Squarespace. Since there are no longer sections in the custom CSS area - it's all just a single window. I get the error message 'missing {' for now but it doesn't tell me what line of code it's missing from.

Thanks in advance for your help!

Hi @Beyondspace - I followed the 2 steps and this is not working for me.  I am using fluid engine, so not sure if that may be the issue?

Hi, I'm having some issues with using this code. I injected the code into the footer, and I linked Read More to #read-more but it's not collapsing.