Read more toggle for long summary (reviews)

Site URL: https://lokalamico.com/wolfgang-vienna-host

Hi,

I followed this tutorial on how to create a testimonial slider via summary block.

Client wants to know if is it possible to automatically put a "Read More..." toggle for long reviews or text that exceed a defined number of characters?

It is added via blog settings below

Password to the URL provided is mmmm1234

Thanks!

You would need something like readmore.js and then could write some javascript for it.

Do you know any lead or guide about how to do this?

or

Did anyone already look for this before?

Thanks!

On 9/29/2021 at 12:07 AM, 895 said:

Do you know any lead or guide about how to do this?

or

Did anyone already look for this before?

Thanks!

Do you still need help?

If yes, can you duplicate the site & add me as a contributor? I can try testing some code

Hi tuan,

Sadly:

Duplication Unavailable

Your site is larger than the 100-page limit for duplication. Edit your site to proceed.

What other things can we do?

Thanks!

I use readmore.js for a customer on other projects, hope this steps will help you

https://sphinx.squarespace.com/founder

- Include jquery and readmore.js as dependencies 

- In Excerpt editor, add a link named 'read more' and place the href as '#read-more'

- In my implementation, the readmore belong to a normal text block, so it slightly different, but here how I place the code

<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.min.js"></script>
<script>
$(document).ready(function() {
	if (window.self!==window.top) {
		return;
	}
	// Issue 02
	$("[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");
      	if (contentEl.length == 0) { return false; }
	    const elBound = (el.getBoundingClientRect());
	    const contentBound = (contentEl[0].getBoundingClientRect());
	    contentEl.readmore({ 
	        collapsedHeight: elBound.y - contentBound.y,
	        speed: 500,
	        embedCSS: true, 
	        lessLink: '<a href="#" data-action="collapse-rmjs">Read less</a>'
	    })
	});
});
</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;	
}
</style>

Hi bangank36,

Thank you for this!

I will try this solution and let you know if I have questions.

Regards.

On 10/7/2021 at 1:50 PM, bangank36 said:

I use readmore.js for a customer on other projects, hope this steps will help you

https://sphinx.squarespace.com/founder

- Include jquery and readmore.js as dependencies 

- In Excerpt editor, add a link named 'read more' and place the href as '#read-more'

- In my implementation, the readmore belong to a normal text block, so it slightly different, but here how I place the code

Hi bangank36,

Here's what I did:
 

1. Copy & paste the code you provided in Code Injection>Header:

2. Edited the excerpt

Where and how do it the the href=#read-more in the excerpt editor?

3. This is still how it looks from front:

Thanks for the patience!

2 hours ago, 895 said:

Hi bangank36,

Here's what I did:
 

1. Copy & paste the code you provided in Code Injection>Header:

 

2. Edited the excerpt

Where and how do it the the href=#read-more in the excerpt editor?

3. This is still how it looks from front:

Thanks for the patience!

What is that page url so I can have a look

I' ve updated my previous codes. Kindly replace them in your code injection

Here is the step to add #read more in your summary item.

20 hours ago, bangank36 said:

I' ve updated my previous codes. Kindly replace them in your code injection

Here is the step to add #read more in your summary item.

 

 

Hi bangan, thank you for the patience and help.

Here's the link

Scroll below and find the review of Daydee

I followed the option

I also updated the code in code injection>header to:

<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.min.js"></script>
<script>
$(document).ready(function() {
	if (window.self!==window.top) {
		return;
	}
	// Issue 02
	$("[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");
      	if (contentEl.length == 0) { return false; }
	    const elBound = (el.getBoundingClientRect());
	    const contentBound = (contentEl[0].getBoundingClientRect());
	    contentEl.readmore({ 
	        collapsedHeight: elBound.y - contentBound.y,
	        speed: 500,
	        embedCSS: true, 
	        lessLink: '<a href="#" data-action="collapse-rmjs">Read less</a>'
	    })
	});
});
</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;	
}
</style>

You got a jquery duplication on footer, kindly remove it since I already included it in the source code

Hi,

Removed the following line in footer injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

When I checked the summary, it changed but it seems not to work

29 minutes ago, 895 said:

Hi,

Removed the following line in footer injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

When I checked the summary, it changed but it seems not to work

let me see

1 hour ago, 895 said:

Hi,

Removed the following line in footer injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

When I checked the summary, it changed but it seems not to work

There is a css that make  the font size of summary item to zero? I dont know why but I remove it by using this css. This is the best that I can do for this issues, if it persists, kindly send pm message so we can look through together

[data-readmore-toggle] {
  font-size: 14px;
  text-decoration: underline;
  color: #787575;
}

Hi bangank,

Thanks, it worked!

On 10/13/2021 at 12:02 PM, bangank36 said:

There is a css that make  the font size of summary item to zero? I dont know why but I remove it by using this css. This is the best that I can do for this issues, if it persists, kindly send pm message so we can look through together

[data-readmore-toggle] {
  font-size: 14px;
  text-decoration: underline;
  color: #787575;
}

Hi bangan,

I checked in a different kind of page we had. Check reviews below https://lokalamico.com/wolfgang-vienna-host. There are three (3) of them and it didn't work. Is there a particular line of code within the page blocking it?

Thanks!