How to add a CUSTOM HTML text section with expandable READ MORE/READ LESS

Store Design
1

Hi,

I have a CUSTOM HTML section on my homepage with just TEXT (>20 lines) but I would like to shorten this TEXT to just 2-3 lines and have a READ MORE option upon clicking expands the rest of the text, and a READ LESS option when expanded to collapse.

See image

tiWiC.jpg
tiWiC.jpg595×480 24.5 KB

How do I do this? I am aware this can be done for {{product.description}} or {{collection.description}} but i could not find any info on how to do this with a CUSTOM HTML section. Do I have to add the CUSTOM LIQUID section to enable this? If so, how and what code to use? - Sorry I am not code-savvy

2

You can use truncate.
Like:

{{ "Your long text." | truncate: 10 }}

Use 2 div. The first one will have truncated text. 2nd one will have not to truncate

Like:

<div class="short-text">{{ text_variable | truncate: 10 }}</div>

<div class="full-text hidden">{{ text_variable }}</div>

Initially, the first one will show when the page loads. 2nd one will be as hidden.
After clicking the read more button you will have to hide the first div and show the 2nd div. You can reverse it also.

You have to do it with Liquid, JavaScript, and CSS.

If it helps mark as accepted solution.
If you want you can message me.
Thanks!