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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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
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. 

Edited by paul2009

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
  • 1 month later...

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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
  • 4 months later...
  • 1 month later...

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!

Link to comment
  • 6 months later...

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.