This tutorial will guide to how to implement ‘Read More’ segment. This tutorial is applicable for Squarespace 7.1 and 7.0. The "Read More" button offers a streamlined and user-friendly approach to content management on digital platforms.

• It enhances the user experience by preventing information overload

• Allowing visitors to a website to choose how much content they wish to view.

• Particularly beneficial on platforms where space is at a premium, such as mobile devices, where keeping the interface clean and uncluttered is crucial.

• Helps in improving page load times as less content is rendered initially

Complexity: Easy

Step 1

Copy the code and from the Squarespace dashboard navigate to Pages > Webtools > Custom CSS and paste the code.

Step 2

Copy the code the code below and paste on the page to be displayed in a code block.

Note:
In the div tag with class “visible-text“ enter the text that will be displayed above the ‘Read more’ segment. And in the div tag with class “content-container“ enter the text that will be displayed when the ‘Read more’ segment is clicked.

Conclusion

Overall, the "Read More/Read Less" button facilitates a tidy, efficient, and engaging way to present and navigate large amounts of information.

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.