Jump to content

[Free Share] Apply read more button to squarespace content

Recommended Posts

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

image.png.e2978b22ace5ede829bddbd75e3b3c3a.png

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

Edited by bangank36
Add the additional feature when click read less button

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...

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.

Link to comment
1 hour ago, 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. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 1 month later...

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 months later...

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>

Link to comment
  • 1 month later...
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 months later...
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

image.png.e2978b22ace5ede829bddbd75e3b3c3a.png

 

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. 

05.jpeg

Link to comment
  • 1 month later...

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.1798427453_ScreenShot2022-10-01at8_09_04PM.thumb.png.97ac5403491581dad367dc31174a0a63.png

 

Any help would be appreciated!

Thanks,

Stu

Link to comment

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.