How do you make a read more button?

So I want to collapse a pretty long text to just a few lines, and uncollapsing(?) it when you click a button. I have tried with code I found online like here:

It worked, but just with one text, if I used it in another one the buttons would just affect the first text. So what I'm asking is how could I collapse more than one text using a read more button? Preferably without using JS since I don't have that plan.

Would an Accordion block do for your need?

6 hours ago, mattias_sigurdsson said:

So I want to collapse a pretty long text to just a few lines, and uncollapsing(?) it when you click a button. I have tried with code I found online like here:

It worked, but just with one text, if I used it in another one the buttons would just affect the first text. So what I'm asking is how could I collapse more than one text using a read more button? Preferably without using JS since I don't have that plan.

Regarding the toggling read less, read more, I posted a free share in the following thread

Hope that it can help you

Thank you BaNgan and I apologize for my late answer. My 15-years-old son is in charge of this, I´m sure he´ll be able to help me based on this information.

Mattias

What you show is exactly what I want to do on my page BaNgan. Only that it´s not just one text, but several, up to 8 or 10 that I want to be collapsable. Is that possible? They should fold and unfold separately.

Mattias

22 minutes ago, mattias_sigurdsson said:

So... To my understanding there is no way to make several texts collapsable? Each of them unfolding and collapsing separately, by clicking a "read more" and "read less" button?

I would have to write an introduction text on the original page and put the rest of the page on another page, and offer a "read more" button to get there. And a "get back"-button to get back to the original page. The ideal would be to have a text that fold an unfold on the very page that you are at. Doesn´t seem to be an option?

Mattias

It seems that you mentioned about something like Blog Page

We have an original page that summary all contents. Each content has a shortly description. By clicking read more button, site directs you to full content page of blog.

Kindly reference about blog by following link: https://support.squarespace.com/hc/en-us/articles/206543727-Blogging-with-Squarespace

Hope it makes sense

Thank you BaNgan. (Is it BaNgan?)!

So that´s good to know; it´s doable I´ll ask my son to dive into the code, let´s see if he can do it.

Mattias

I have looked at it with my son. To our understanding this is not a collapsable text, but rather a button that takes the reader to another page. And then, if they want to go on reading on the first page, they have to get back. Right?

It´s very similar to what I´m asking for, but it would be better not to have to send the reader to another page. A truly collapsable text, that is. Why? Because if they stay on the same page they don´t lose the context. They don´t have to get back, because they never leave it.

Do you see the difference?

It seems that that option does not exist, then?

Best regards

Mattias

3 minutes ago, mattias_sigurdsson said:

I have looked at it with my son. To our understanding this is not a collapsable text, but rather a button that takes the reader to another page. And then, if they want to go on reading on the first page, they have to get back. Right?

It´s very similar to what I´m asking for, but it would be better not to have to send the reader to another page. A truly collapsable text, that is. Why? Because if they stay on the same page they don´t lose the context. They don´t have to get back, because they never leave it.

Do you see the difference?

It seems that that option does not exist, then?

Best regards

Mattias

Yes, with the Blog Page, we will direct clients to another page.

Regarding the collapsing text, this is the demo result if you implement the codes in my post

My solution post: 

Yes, and that is perfect, that is exactly what I want to do!

Just one question remains: can I do that with several texts on the same page? That would mean, in your example, that also the "Build it" and "Grow it" texts would be expandable/collapsable.

Thank you for your patience!

Mattias

6 hours ago, mattias_sigurdsson said:

Yes, and that is perfect, that is exactly what I want to do!

Just one question remains: can I do that with several texts on the same page? That would mean, in your example, that also the "Build it" and "Grow it" texts would be expandable/collapsable.

Thank you for your patience!

Mattias

Sure,

You can follow steps on my post to implement it

OK, thank you Bangank, then we´ll try it. My son made an intent  and didn´t manage to make it work, possibly we will have to reach out for some help. But not yet!
TY!

Mattias

Rock you

Hi, it's the son here. I followed the the post but it wont work. The "Read More" button is highlighted, but the rest of the text doesn't collapse and the button doesn't react in any way. I have seen some other posts mentioning including the readmore.js plugin, is this required for it to work? If not, what other thing may I be doing wrong?

Thanks for the quick answers!

Emil

8 hours ago, mattias_sigurdsson said:

Hi, it's the son here. I followed the the post but it wont work. The "Read More" button is highlighted, but the rest of the text doesn't collapse and the button doesn't react in any way. I have seen some other posts mentioning including the readmore.js plugin, is this required for it to work? If not, what other thing may I be doing wrong?

Thanks for the quick answers!

Emil

Can you share your site with the protected password so we can take a look?

The link to the page is https://www.mandara.blog/cot and the password is monaco. I've written in bold where it is.

Thanks for all the help

Emil