Introduction

Collapsible text allows you to display only the first few lines of text (introductory text), and hide the remaining lines of text until a site visitor performs an action to read more and display the remaining text.

Set Up Your Collapsible Text

• Set the text of the collapsible text element using the text property.
• Set the maximum number of initial lines of text that you would like to display in the collapsible text, using the maxLines property. This is how you divide the introductory text and the remaining text in the collapsible text.
• The introductory text is accompanied by an ellipsis to signal to the site visitor that there is additional text.
• By default, the ellipsisEnabled property is true, and the ellipsis functionality for the collapsible text is turned on. In this case, the ellipsis is shown, and the collapsible text displays the introductory text until a site visitor performs an action to read more and display the remaining text.
• If the ellipsisEnabled property is false, the ellipsis functionality for the collapsible text is turned off. In this case, the ellipsis is hidden, and the collapsible text displays the full text and acts as a regular text element.
• To turn off the ellipsis functionality, use the disableEllipsis() function. Turning off the ellipsis functionality sets the ellipsisEnabled property to false.
• To turn on the ellipsis functionality, use the enableEllipsis() function. Turning on the ellipsis functionality sets the ellipsisEnabled property to true.

Assuming the ellipsis functionality is turned on, there are 2 options for displaying the remaining text. Set the readMoreActionType to one of the following:

ExpandOnCurrentPage

• The collapsible text expands and displays the remaining text on the current page.
• In the collapsed state, the collapsible text contains the introductory text with the ellipsis and a read more button. When the read more button is clicked, the collapsible text expands.
• In the expanded state, the ellipsis is hidden, collapsible text shows the remaining text, and a read less button appears. When the read less button is clicked, the collapsible text collapses and goes back to the collapsed state.
• You can use the expandText() and collapseText() functions to expand and collapse the collapsible text. Note that these functions can only be used for this readMoreActionType.

LinkToContent

• The collapsible text links to the remaining content.
• You must define the link to the remaining content. To do this, set the link value in the data object found in the readMoreActionData property.
• The collapsible text contains the introductory text with the ellipsis. By default, this text is clickable and links to the remaining content link that you defined.
• Alternatively, you can add a read more button to the collapsible text. In this case, the introductory text is no longer clickable, and the button links to the remaining content link that you defined.
• Add a read more button by setting the readMoreButtonVisible value in the data object found in the readMoreActionData property to true, or by calling the addReadMoreButton() function.
• You can remove the read more button from the collapsible text. When you remove the read more button, the introductory text is clickable, and the text links to the remaining content link that you defined.
• Remove a read more button by setting the readMoreButtonVisible value in the data object found in the readMoreActionData property to false, or by calling the removeReadMoreButton() function. Note that these functions can only be used for this readMoreActionType.

For each readMoreActionType there is a readMoreActionData property. The readMoreActionData property contains a data object which allows you to define the relevant settings for the selected readMoreActionType. Set the following data object values for the readMoreActionType you selected:

ExpandOnCurrentPage

• readMoreButtonText: Text of the read more button.
• readLessButtonText: Text of the read less button.
• collapsed: Whether the collapsible text is currently collapsed.

LinkToContent

• link: Required. Link for the remaining content. Supports all link types.
• target: Determines where the link opens.
• readMoreButtonVisible: Whether the read more button is visible. If true, the button links to the remaining content link. If false, the introductory text links to the remaining content link. Defaults to false.
• readMoreButtonText: Text of the read more button.