Show/Hide Text Block Long List

Description

show “read more” with text block has long list
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. First, add a Text Block with your desired list

#1.2. Hover on top right of section > Click EDIT SECTION

#1.3. at Anchor Link > enter word: long-list

#1.4. Hover on Page where you use Text > Click Gear icon

#1.5. Click Advanced > Paste this code

If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 08.26c05v1 Show/Hide Text Block Long List -->
<script>
window.LongListToggleConfig = {
  target: "[id*='long-list'] .sqs-html-content",
  visibleItems: 5,
  moreText: "Read more",
  lessText: ""
};
</script>
<script src="https://code.beaverhero.com/textblock/0826c05v1textlonglist.js"></script>

#2. Customize

#2.1. To make number of visible item + change text, adjust these lines (line 05, 06, 07)

visibleItems: 5,
moreText: "Read more",
lessText: ""

#2.2. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block under Text Block

Then add this code into Markdown Block

<script>
window.LongListToggleConfig = {
  target: "[id*='long-list'] .sqs-html-content",
  visibleItems: 5,
  moreText: "Read more",
  lessText: ""
};
</script>
<script src="https://code.beaverhero.com/textblock/0826c05v1textlonglist.js"></script>