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

Add a multi-state box to your page as follows:

  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 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.

To remove a border from a multi-state box and blend it in with your page background

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

  1. Click the multi-state box, click the Design  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.

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.

You can rename both your multi-state box and your state in the Properties & Events panel. 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.

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 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 to define when to switch states.

  1. Open the code panel by clicking the tab at bottom of your Editor with the label .
    You'll see the 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:
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