Migration Rest Portal

Build Apps

Go Headless

Client

Test

Develop Websites

REST

# Velo Tutorial: Expand Text with a Read More Link

<div style="background: #D9F4F4; border: 1px solid #B3E9E8; border-radius: 6px; padding: 7px 17px 7px 17px; width: max-content; margin-top: 5px; margin-bottom: 5px;">Visit the <a style="text-decoration: color: #3197EF;" href="https://www.wix.com/velo" target="_blank">Velo by Wix website</a> to onboard and continue learning.</div>

This tutorial describes how to use [Velo](resourceId::953e9489-9371-4a1c-8ab2-3e9485d12d97*https://github.com/wix-private/developer-docs/blob/835806e2fbe964b74b3cacf03d22890776372319/velo-articles/What%20is%20Velo/About%20Velo%20by%20Wix.md) to let site visitors expand and collapse text with "Read More" and "Read Less" buttons. 

<div style="text-align:center">

<img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2020/06/01/024beeba-a0ba-4cb5-b38d-d1acddbf0cd2/9fcd5841-de0b-4a0c-90f1-85e368c912e4.gif" style="max-width:30vw" />

</div>

### Overview

To create Read More / Read Less functionality, we use a [multi-state box](resourceId::085ddba4-ec46-494e-b5e7-e57bb587d38c*https://github.com/wix-private/developer-docs/blob/835806e2fbe964b74b3cacf03d22890776372319/velo-articles/Wix%20Editor%20Elements%20with%20Velo/About%20Multi-State%20Boxes.md). Multi-state boxes are great for switching between several views. They contain multiple states with different content, and display one state at a time.

One state in our multi-state box will contain the shorter (collapsed) content and one state will contain the longer (expanded) content. We'll use code to enable site visitors to switch between the 2 states by clicking "Read More" and "Read Less" buttons.

### Step 1: Add a Multi-State Box

Add a [multi-state box](resourceId::bc12417f-f565-4b77-acf0-2a70fba14dcc#add-a-multi-state-box-1*https://github.com/wix-private/developer-docs/blob/835806e2fbe964b74b3cacf03d22890776372319/velo-articles/Wix%20Editor%20Elements%20with%20Velo/Setting%20Up%20Your%20Multi-State%20Box.md#add-a-multi-state-box-1) to your page as follows:

1.  Make sure Velo Dev Mode is [enabled](resourceId::953e9489-9371-4a1c-8ab2-3e9485d12d97#to-enable-velo-on-your-site*https://github.com/wix-private/developer-docs/blob/835806e2fbe964b74b3cacf03d22890776372319/velo-articles/What%20is%20Velo/About%20Velo%20by%20Wix.md#to-enable-velo-on-your-site).
2.  Click **Add**  ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2020/05/31/ee479596-9dfd-4345-8c55-10627538ec60/68208764-f6d6-4040-ade1-5f328e096f98.png)  on the left side of the Editor.
3.  Click **Interactive**.
4.  Drag a multi-state box element on to your page.

You can choose one of the pre-designed multi-state boxes and customize it, or you can add a blank multi-state box and design it from scratch. Note that you can't remove the border from a blank multi-state box.

<details>
<summary>To remove a border from a multi-state box and blend it in with your page background</summary>

For your non-blank multi-state box, do the following:

1.  Click the multi-state box, click the Design ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2020/05/31/7b10ceb6-6baf-4cda-9019-a2668ea9288e/3c5dc2d0-f365-40f5-854d-a200dcf5bb0e.png) button, select **Border**, and set the width to 0.
2.  Still in Box Design, click **Shadow** and make sure the Shadow setting is disabled.
3.  Click the multi-state box, click **Change Background**, click **Color** and select the same color as your page's background color.

</details>

### Step 2: Rename Your Multi-State Box and State

When you click your multi-state box, you can see the ID (name) of both the multi-state box and the current state. The default ID for our multi-state box is `statebox1` and it has a single state, `State1`.

<div style="text-align:center">

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2020/05/31/e8e8ba29-7725-4f0c-b84a-99f9ce7d2801/4a27b9e0-b1bf-4b5e-abd6-17b5fffaef9a.png)

</div>

You can rename both your multi-state box and your state in the [Properties & Events panel](resourceId::9f98b07b-8d0d-40b4-bdfb-b7dcc085ead0*https://github.com/wix-private/developer-docs/blob/835806e2fbe964b74b3cacf03d22890776372319/velo-articles/Velo-Workspace/Working%20with%20the%20Properties%20&%20Events%20Panel.md). Just click each ID and enter a new name. It's a good idea to give your IDs meaningful names, since you'll be using them in code.

<div style="text-align:center">

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/99f9f305-0415-4713-856e-b7aa93cbd4d3/2020/10/25/cafaa192-8f11-4e46-aaeb-1df9feb427f4/74c1fa32-f024-4f75-8309-b53b46722fd7.jpg)

</div>

We renamed our multi-state box to `readMoreStatebox` and our state to `collapsedState`, since this state will have the collapsed version of the text.

<div style="text-align:center">

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/0ca9e8ba-16ed-4cd8-a1e1-58d01c4420f7/2020/06/01/121687fc-f0e6-468a-8e28-c8d40103cc3b/95e2b9bf-24cf-49c0-b4c5-5bc3eda297d3.png)

</div>

### Step 3: Add Content to Your Collapsed (Short) State

Now you can add your page content to your state: images, videos, text, or other elements. Make sure the elements fit within the borders of your multi-state box so they'll be attached to the state.

Since this is the collapsed state, add the short version of your text.

### Step 4: Add a "Read More" Button

When you're finished setting up your state, do the following:

1.  Add a transparent button (with no background or border) to your state from the Add panel.
2.  Change the button text to **Read More** and match the font type and size to the rest of your text.
3.  Rename the button ID to `readMoreButton` in the Properties & Events panel.
4.  Append the button to the end of the collapsed text.

### Step 5: Duplicate Your State

Now you can duplicate your collapsed state and then adjust it to create the expanded state:

1.  Click your multi-state box and click **Manage States**.
2.  Click **Duplicate State**. Now you're in the second state of your multi-state box.

>**Note** 
> You can switch between your states in the Editor by clicking the multi-state box, clicking the dropdown with the state ID (name) and selecting the state you want to edit.

### Step 6: Set Up Your Expanded (Long) State

1.  Rename the state ID to `expandedState` in the Properties & Events panel.
2.  Add the longer text to this state. You can resize the multi-state box if you need by dragging its handles at the edge of the box.
3.  Change the **Read More** button text to **Read Less**.
4.  Rename the button ID to `readLessButton` in the Properties & Events panel.
5.  Move the button to the end of the longer text.

### Step 7: Add Code

Now we need to write code to define when to switch between the collapsed state and expanded state. We use the [MultiStateBox API](https://www.wix.com/velo/reference/$w.MultiStateBox.html) to define when to switch states.

1.  Open the [code panel](resourceId::a17f05db-da83-448d-8ba5-7a7e6e47c609*https://github.com/wix-private/developer-docs/blob/835806e2fbe964b74b3cacf03d22890776372319/velo-articles/Velo-Workspace/Working%20in%20the%20Code%20Panel.md) by clicking the tab at bottom of your Editor with the label **<my page name>**.  
    You'll see the [`onReady()`](resourceId::f03047c0-1db2-47cc-8b15-a75f75fd0af2#onready*https://github.com/wix-private/developer-docs/blob/835806e2fbe964b74b3cacf03d22890776372319/velo-articles/What%20is%20Velo/Velo%20Glossary.md#onready) function (lines 1 & 9 below) in your code panel. Code inside the `onReady()` function runs when your page loads.
2.  Add the code in lines 2-8 below to your `onReady()` function so that the code on your page looks like this:

```javascript
$w.onReady(function () {
    $w("#readMoreButton").onClick(() => {
        $w("#readMoreStatebox").changeState("expandedState");
    });

    $w("#readLessButton").onClick(() => {
        $w("#readMoreStatebox").changeState("collapsedState");
    });
});
```

#### Understanding the Code

*   **Line 2:** When the **Read More** button is clicked, do the following:
*   **Line 3:** Change the current state of the `readMoreStatebox` multi-state box to the `expandedState`.
*   **Line 6:** When the **Read Less** button is clicked, do the following:
*   **Line 7:** Change the current state of the `readMoreStatebox` multi-state box to the `collapsedState`.

Preview your site to make sure everything is working as expected. Then go ahead and publish.