Create "Read More"/ "Read Less" links using a multi-state box

Show and tell
,
1

(Note: For a detailed step-by-step tutorial on this topic, click here .)

Hey, did you know you can expand text using a “Read More” button with just a few lines of code?

884×370 161 KB

Here’s how:

  1. Add a multi-state box (MSB) to your page.
    Now you’re in State1 of the MSB. You can rename the “State1” state ID to “collapsedState” in the Properties Panel.

  2. Add content to the state, including the short version of the text you’d like to display.

  3. Add a transparent button from the Add panel.

  4. Change the button text to “Read More” and append it to the end of your short text.

  5. Duplicate the first state by clicking the MSB and then clicking Manage States > Duplicate State .
    Now you’re in State2. You can rename the “State2” state ID to “expandedState”.

  6. Add the expanded content to your state.

  7. Change the “Read More” button text to “Read Less” and move it to the end of the expanded text.

  8. Add the following code to your onReady() function:

    $w("#readMoreButton").onClick(() => {
        $w("#myStatebox").changeState("expandedState");
    });
    
    $w("#readLessButton").onClick(() => {
        $w("#myStatebox").changeState("collapsedState");
    });

Tip! If you don’t want a border around your multi-state box, choose a non-blank MSB from the Add panel, change the MSB background color to match your page background color, disable the shadow setting, and set the border opacity to 0.

BTW - We’re locking these posts so that any requests for help with Velo can be maintained in the Community Discussion section. Please post your questions or feedback there.

8 Likes