Use the Read more element to hide and show more content on the click of a button.
Locating the read more element
To locate the Read more element:
- Navigate to a component or a template with the Layout canvas
- Click the + button on the Layout canvas
- Within the Elements tab, look for the Read more element.
The Read more element includes the following groups of fields:
Button
- Button text (collapsed) - Set the button text when the read more is collapsed
- Button text (expanded) - Set the button text when the read more is expanded
- Button style - Set a button custom style
jQuery animation
- jQuery animation - Set a jQuery animation to be applied when the Read more element is expanding or collapsing
Initial state
- Initially hidden - Hide the Read more content on page load
- Initially visible - Show the Read more content on page load.
Custom style
- Layout style - Apply a Layout custom style to your Read more element.
Match heights
- Match heights - Match the height of the element using:
- None - Removes the match heights at the specific breakpoint
- Class - Match the height of the element with another element with the same class name
- Children with class - Match the heights of any child elements with the same class name
- Child element - Match the heights of all child elements of the same type.
For more information on Match heights, see Match the heights of elements.
Site Studio