This tutorial will show you how to implement ‘Read More’ segment and 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

• Allows 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 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. In the div tag with class “content-container“ enter the text that will be displayed when the ‘Read more’ segment is clicked.

Step 3

If you wish a second additional Read More’ segments, you will need to adjust the html code.

Change <input type="checkbox" id="toggle-1"> to <input type="checkbox" id="toggle-2”> and <label for="toggle-1" class="read-more"> to <label for="toggle-2" class="read-more">

For the third Read More’ segments, it will be <input type="checkbox" id="toggle-3”> and <label for="toggle-3" class="read-more">

Below is the code for the second Read More’ segment.

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, expressed 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.