Overview
Read More Button

⚠️ Work in progress ⚠️

Attention: This script showcased on this page is not finished! It might not work as intended under certain conditions, on certain browsers or on certain devices. The JavaScript filed linked in the code section below is still subject to change and could break pages which used the older file. If you would like to report errors or make suggestions for new features you can do this here.

false

Read More Button

Too much text for too little space? No problem. Just add a read more button with these simple scripts. Use Version one to be able to place your read more button wherever you want. Simply write [read-more] in your rich text field on it’s own paragraph and the script will automatically hide the content after that behind the read more button. With Version 2 the script automatically cuts off your text after as many characters as you like. This Version is ideal for normal paragraphs or text fields. Pretty neat, right?

Demo

Version 1

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

[read-more]

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Version 2

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Version 3

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Code

Attention: This code is linked to external files which might change or become unavailable in the future!

To make the code below easier and faster to implement it relies on files which are hosted externally on our servers. Because of that we cannot give you a 100% guarantee, that these files will always stay the same, or will always be accessible through the link provided. For better reliability we therefor advice you to host these files by yourself or add its content directly in Webflow. You can learn more about this topic here.
https://eseassets.ch/globalscripts/code/code.js
Download File

Add this code inside the <head> tag on your page.

Copy code
The code in here is only visible on the published website.
Go to codeblocks.webflow.io or take the code from the actual custom code field of this page

Add this code before the </body> tag on your page.

Copy code
The code in here is only visible on the published website.
Go to codeblocks.webflow.io or take the code from the actual custom code field of this page
We won't take any responsibility for the code provided. It may not be set up according to best practices of programming or built in the most efficient way possible. It's just here so solve your problem.

Get the source code for
free by signing up to Codeblocks