Read More Element
The Read More Element hides part of your content behind a toggle. Visitors see a “Read More” link with an icon; one click slides the hidden content open, and the link changes to “Read Less” so it can be closed again.
It keeps long pages short without removing anything: detailed descriptions, background information, long lists or additional sections are available to everyone who wants them. The hidden part can hold any content, from a paragraph of text to complete Containers with Columns and other elements.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Read More Element
Add the Read More Element and put the collapsible part into Content. Use the Add Element button in the editor toolbar to insert Containers, Columns or other elements there. Anything that should always be visible, such as a heading or an introduction, belongs in a separate element above this one. Then choose the Default State, the Toggle Alignment and the Animation Duration (ms) of the opening and closing movement.
The Text tab sets the toggle wording: Text Before (Collapsed) is shown while the content is closed, Text After (Expanded) while it is open. Adjust the Text Size, Text Color and Text Hover Color there. The Icon tab turns the icon on or off, places it left or right of the text and offers a chevron, arrow, angle or your own icon, with its own size and colors.
The Divider tab adds a line: Above or Below run across the full width of the element, while Both Sides (flanking text) places a line on each side of the toggle on the same row. The icon always points down and turns upside down when the content is open, so any icon you choose works for both states.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Content | The collapsible content — use the Add Element button in the toolbar to insert Containers, Rows, Columns, or other Elements. Anything you want always visible (like a title) should be a separate element placed outside/above this one. |
| Default State | Controls this setting. |
| Toggle Alignment | Controls this setting. |
| Animation Duration (ms) | Controls this setting. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Controls this setting. |
| CSS Class | Controls this setting. |
| CSS ID | Controls this setting. |
Text
| Heading | Description |
|---|---|
| Text Before (Collapsed) | Controls this setting. |
| Text After (Expanded) | Controls this setting. |
| Text Size | Controls this setting. |
| Text Color | Controls this setting. |
| Text Hover Color | Controls this setting. |
Icon
| Heading | Description |
|---|---|
| Show Icon | Controls this setting. |
| Icon Position | Controls this setting. |
| Icon Style | Always rendered pointing down, then rotated 180° on expand. |
| Custom Icon | Controls this setting. |
| Icon Size | Controls this setting. |
| Icon Color | Controls this setting. |
| Icon Hover Color | Controls this setting. |
Divider
| Heading | Description |
|---|---|
| Divider Position | “Both Sides” flanks the toggle text on the same line (── Read More ──). Above/Below run the full width of the element. |
| Divider Style | Controls this setting. |
| Divider Thickness | Controls this setting. |
| Divider Color | Controls this setting. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- The toggle sits below the content area. With Default State set to Collapsed the hidden part takes no space at all, so place an introduction above the element that tells visitors what they will find.
- Collapsed content is still part of the page, so search engines can read it. It only looks hidden.
- Write clear toggle texts such as “Show all technical data” instead of a generic “Read More” when several Read More elements are on one page.
- The toggle is a real button that tells screen readers whether the content is open or closed. Links and form fields inside collapsed content can still be reached with the Tab key, so keep interactive items out of the hidden part where you can.
- Keep the Animation Duration (ms) short, around 200 to 400 ms, so opening the content feels quick.