'Read more' to reveal text - coding required

Hi all!

My photography website is comprised of many project which start with a block of text. This text is often quite lengthy and on mobile devices, takes up the whole screen.

Here's an example: https://www.josephjohnherbert.com/home/tea-pickers-of-nanu-oya

I'm ideally looking for a clean way to hide a chunk of the text, which can be revealed by clicking 'read more'. Rather than a button, I'd prefer it to just be text.

The solution posted in 2022 by @Beyondspacedoesn't seem to work with the current 2023 Squarespace engine, throwing up the code error 'missing {'

I'd love to diagnose this issue myself, but I'm rather clueless when it comes to coding, beyond basic HTML.

Many thanks

Joseph

Hi,

Which code are you referring to?

14 hours ago, tuanphan said:

Hi,

Which code are you referring to?

This is the @Beyondspace post I was referring to.

The coding and method is described here.

Do you mind to share the site URl where you want to apply the code?

Of course.

www.josephjohnherbert.com is the homepage

I'm trying to condense the text on each of the projects, for example: www.josephjohnherbert.com/home/tea-pickers-of-nanu-oya

Can you follow the step 1: adding a text and a link "#read-more" for it in your paragraph?

I've re-entered the code from your initial post and linked #read-more to 'read more' text in my paragraph, but the custom CSS still throws up the error "missing opening '{"

You need to place the code into Footer code injection, not the custom CSS

Check this out

I only have a Personal Plan with Squarespace, so it looks like access to this extra code injection would cost me an additional ~£60 🫤. Is there alternative code using CSS, that would produce a similar effect?

Cheers 🙂