IN THIS ARTICLE

Velo Tutorial: Expand Text with a Read More Link

Visit the Velo by Wix website to onboard and continue learning.

This tutorial describes how to use Velo 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. 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 Editor:

  1. Make sure Velo Dev Mode is enabled.
  2. Click Add on the left side of the Editor.
  3. Click Interactive.
  4. Drag a multi-state box element onto your page.

Wix Studio:

  1. If necessary, click Code icon 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.
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. 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 to define when to switch states.

  1. Open the code panel.

  2. Add the code in lines 2-8 below to your onReady() function so that the code on your page looks like this:

Copy Code
$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.

Was this helpful?
Yes
No