Introduction
This feature is not yet available to all users.
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 istrue
, 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 isfalse
, 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 theellipsisEnabled
property tofalse
. - To turn on the ellipsis functionality, use the
enableEllipsis()
function. Turning on the ellipsis functionality sets theellipsisEnabled
property totrue
.
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()
andcollapseText()
functions to expand and collapse the collapsible text. Note that these functions can only be used for thisreadMoreActionType
.
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 thereadMoreActionData
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 thereadMoreActionData
property totrue
, or by calling theaddReadMoreButton()
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 thereadMoreActionData
property tofalse
, or by calling theremoveReadMoreButton()
function. Note that these functions can only be used for thisreadMoreActionType
.
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. Iftrue
, the button links to the remaining content link. Iffalse
, the introductory text links to the remaining content link. Defaults tofalse
.readMoreButtonText
: Text of the read more button.
Was this helpful?