This tutorial describes how to use Velo to let site visitors expand and collapse text with "Read More" and "Read Less" buttons.
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.
Click the Add panel and select Layout Tools > Multi-state Boxes.
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.
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.
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.