> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: $w

## Namespace: collapsible-text

## Article: Introduction

## Article Link: https://dev.wix.com/docs/velo/velo-only-apis/$w/collapsible-text/introduction.md

## Article Content:

# 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. 

![Collapsible Text](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_collapsible_text.png "Collapsible Text")

### Set Up Your Collapsible Text 
+ Set the text of the collapsible text element using the [`text`](#text) property. 
+ Set the maximum number of initial lines of text that you would like to display in the collapsible text, using the [`maxLines`](#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`](#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()`](#disableellipsis) function. Turning off the ellipsis functionality sets the `ellipsisEnabled` property to `false`.
+ To turn on the ellipsis functionality, use the [`enableEllipsis()`](#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`](#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()`](#expandtext) and [`collapseText()`](#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`](#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`](#readmoreactiondata) property to `true`, or by calling the [`addReadMoreButton()`](#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`](#readmoreactiondata) property to `false`, or by calling the [`removeReadMoreButton()`](#removereadmorebutton) function. Note that these functions can only be used for this `readMoreActionType`. 

#### For each `readMoreActionType` there is a [`readMoreActionData`](#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.