Read more element

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:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. 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.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.