> 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: Expand Text with a Read More Link
## Article: Expand Text with a Read More Link
## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/expand-text-with-a-read-more-link.md
## Article Content:
# Velo Tutorial: Expand Text with a Read More Link
This tutorial describes how to use [Velo](https://dev.wix.com/docs/develop-websites/articles/get-started/about-developing-websites.md) to let site visitors expand and collapse text with "Read More" and "Read Less" buttons.
### Overview
To create Read More / Read Less functionality, we use a [multi-state box](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/about-multi-state-boxes.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
**To add a multi-state box to your page:**
Wix Studio:
1. If necessary, click  and then **Start Coding**.
2. Click the **Add** panel and select **Layout Tools > Multi-state Boxes**.
3. Drag a multi-state box element onto your page.
Wix Editor:
1. Make sure Velo Dev Mode is [enabled](https://dev.wix.com/docs/develop-websites/articles/get-started/about-developing-websites.md).
2. Click **Add**  on the left side of the editor.
3. Click **Interactive**.
4. Drag a multi-state box element onto your page.
Remove a border from a pre-designed multi-state box and blend it in with your page background
Click on the pre-designed multi-state box and update the design as follows:
1. Set the border width to 0.
2. Make sure the shadow is disabled.
3. Change the box's background color to match the color of your page's background color.
>**Notes:**
> - Pre-designed multi-state boxes aren't currently supported in Wix Studio.
> - You can't remove the border from a blank multi-state box.
### Step 2: Rename Your Multi-State Box and State
When you click your multi-state box, you can see the ID (name) of the multi-state box in the [Properties & Events panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md). When you click **Manage States**, you can see the IDs of the default states for the multi-state box.
You can rename both your multi-state box and your states in the Properties & Events panel. It's a good idea to give your IDs meaningful names, since you'll be using them in code.
We renamed our multi-state box to `readMoreStatebox` and our state to `collapsedState`, since this state will have the collapsed version of the text.
### 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 by clicking **Manage States** and selecting the state you want to edit.
### Step 6: Set Up Your Expanded (Long) State
1. Rename the duplicated 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.
+ Learn how to work with the **Wix Studio** [code panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md).
+ Learn how to work with the **Wix Editor** [code panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-in-the-code-editor.md).
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.