Velo Tutorial: Expand Text with a Read More Link
This tutorial describes how to use Velo to let site visitors expand and collapse text with "Read More" and "Read Less" buttons.
![](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)
Overview
To create Read More / Read Less functionality, we use a multi-state box. 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:
- If necessary, click
and then Start Coding.
- Click the Add panel and select Layout Tools > Multi-state Boxes.
- Drag a multi-state box element onto your page.
Wix Editor:
- Make sure Velo Dev Mode is enabled.
- Click Add
on the left side of the editor.
- Click Interactive.
- 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:
- Set the border width to 0.
- Make sure the shadow is disabled.
- 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. 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:
- Add a transparent button (with no background or border) to your state from the Add panel.
- Change the button text to Read More and match the font type and size to the rest of your text.
- Rename the button ID to
readMoreButton
in the Properties & Events panel. - 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:
- Click your multi-state box and click Manage States.
- 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
- Rename the duplicated state ID to
expandedState
in the Properties & Events panel. - 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.
- Change the Read More button text to Read Less.
- Rename the button ID to
readLessButton
in the Properties & Events panel. - 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 to define when to switch states.
-
Open the code panel.
- Learn how to work with the Wix Studio code panel.
- Learn how to work with the Wix Editor code panel.
-
Add the code in lines 2-8 below to your
onReady()
function so that the code on your page looks like this:
1
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 theexpandedState
. - 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 thecollapsedState
.
Preview your site to make sure everything is working as expected. Then go ahead and publish.