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.

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.