Multi-state box

Display different pieces of content, one state at a time using a Multi-state box. Use this to reveal content when site visitors hover or click, or based on specific conditions.

Enabling dev mode

To add a Multi-state box to a site, first you have to enable dev mode since you’ll use code to define how and when each state will be displayed.

A pop-up showing Velo Dev Mode with a Turn on Dev Mode button

Adding the Multi-state box

Simply drag the Multi-state box from the Layout tools section of the Add panel into the section where you want it to display.

The layout tools panel in Editor X. The cursor is hovering over the Multi-state box

Managing states

To access the Manage states panel, click on the Multi-state box and select Manage States. Here you can navigate between states and add, delete and duplicate them.

The manage states menu is open and the second state is selected. There are options to duplicate a state and to add a new state.

Edit ID

You can also change each state’s ID from the Manage States panel. To refer to the state that you want to trigger in the code, you need to use the ID for the state. Each state comes with a default ID, but you can change it by clicking on the 3 dots beside the state and Edit ID.

The second state of the Multi-state box is selected and the cursor is hovering over the option to edit its ID.

Delete state

To delete a state, click on the 3 dots beside it and hit Delete.

The manage states menu is open, the second state is selected and the cursor is hovering over the option to delete this state.

Duplicate states

In some cases it might be useful to duplicate a state, such as when you’ve designed a state and need another state with the same layout, but different content. To duplicate a state, simply click on the Duplicate State button once the state is selected.

The manage states menu is open, the second state is selected and the cursor is hovering over the option to duplicate this state.

Adding states

If you need more states, click on Add New State in the manage states panel.

Adding code

To define which state you want to display and when each will be displayed, add the required code to the code panel. For more information about the code related to this element, click here.

Follow these steps in the editor

Open exercise template →

Turn on dev mode. From the top bar click on dev mode and then on Turn on Dev mode.
Add a new state. Click on the Multi-state box element and then on Manage State from the floating menu. From the panel that opens up, click on Add New State.
Change the state ID. Click on the 3 dots next to the new state you’ve added. Choose Edit ID and change it to myNewState.
Design the new state. Click on the container and change its background color. To do so, open the Inspector panel, click on the design tab and choose a background color. You can then also add any elements you’d like to this state.
Change the ID of the button. Above the Multi-state box click on the Add New State button and, from the Properties and events panel, change it’s ID to newStateBtn.
Add code. To define which state will be displayed when each button is clicked, add the following code to the code panel inside the onReady function:

$w('#packagingBtn').onClick(() => {$w('#multiStateBox').changeState('packaging');});$w('#artDirectionBtn').onClick(() => {$w('#multiStateBox').changeState('artDirection');});$w('#newStateBtn').onClick(() => {$w('#multiStateBox').changeState('myNewState');});

7. Preview the result. Click on Preview and click on each button to see how the states change.

Transcript

Let’s explore how to use Multi-state boxes on Editor X.

A Multi-state box allows us to display different pieces of content, one state at a time. You might use this to reveal content when site visitors hover or click, or based on specific conditions like online store product statuses. In this video, we’ll work on this site, featuring art direction and packaging from a brand campaign.

Let’s dive in.

First, to enable the option to add a Multi-state box, we need to turn on dev mode. This is because we need to use code to define the state that the box displays.

Once it’s been turned on, we can drag a Multi-state box onto the canvas from the Layout tools in the add panel.

Once it’s been added to the canvas, we can use the Inspector panel to adjust the properties for this Multi-state box.

For this design, we’ll set its width to 100% and remove all of its margins. We won’t adjust its height right now because we can only change the height while editing the specific states of the box.

Now let’s work on the first state. For this state we’ll display information about the art direction of a campaign this brand produced. We’ll adjust the grid of the container to suit our design.

Next we’ll open up the Inspector panel. From there, we can design this container. In this example, we'll change the background color.

We’ll also add the elements we need for our design. We’ll drag this image into the right cell of the grid and we’ll drag a stack that includes our title and paragraph into the left cell.

We’ll then adjust the design at the tablet breakpoint. Specifically we’ll change the grid layout from columns to rows…

… and adjust the stack properties.

If we switch from the tablet breakpoint to mobile, we can see the cascading rule in action. The design changes we made have applied to lower breakpoints, but the design stayed the same on desktop.

Let’s move on to the second state of this Multi-state box. By default, the Multi-state box comes with 2 states. To navigate between states, all we have to do is open the Layers panel and click on the next state we want to work on.

We can also choose another state by clicking Manage States from this floating action bar.

For this example, both states in our Multi-state box have the same design. That means we can just duplicate the design from the first state we set up, like so. Of course, you can always use different designs and elements for each state, if you’d like.

We don’t need a third state for this example, so we’ll go ahead and select it and hit delete.

It’s worth noting that the order of the states in the Manage States menu is important because the first one in the list will display by default when the site loads.

For this box, we’ll adjust the second state by simply changing the image and updating the text in the title and paragraph.

Next, let’s talk about the state IDs. By default, each state gets a unique ID. We’ll refer to these IDs later when we’re writing code but, for now, we just want to make the ID easier to recognize. To do so we’ll click these three dots, click Edit ID, change the first one to ‘artDirection’ and the second one to ‘packaging’.

You can also open the Properties and Events panel and change these IDs here.

For the Multi-state box element itself, we’ll change the element ID to ‘multiStateBox’.

Now that we’ve defined the states, let’s talk about how we can trigger the display of each state. We can trigger these displays using various conditions, but for this example we’ll set up triggers that cause a switch between states when the buttons are clicked. We’ll accomplish this with code.

First, we’ll need to change the ID of each of these buttons. We’ll change the ID of the first button in the Properties and Events panel and rename it ‘artDirectionBtn’.

We’ll then change the ID of the second button to ‘packagingBtn’.

To make our design work as we want, we need to add code to define which state will show when each button is clicked. First, we’ll paste this code snippet into the code panel. You’ll notice we’re referring to the IDs we set up earlier here. You can choose to write your own code to achieve this or you can use Velo Reference to learn more about using code.

Now let’s look at how we’ll use this code in a bit more detail.

We’ve added this code inside the onReady function. This means our code will be ready to work only after all the page elements are fully loaded.

Now we can create the code that will cause the different states of our box to show when site visitors click either button we’ve set up. To do this, we’ll write a separate onClick function for each of the buttons.

We’ll start with the packaging button. This second line of code defines that the packaging button will be triggered when it’s clicked. The code between these curly brackets will define what will display when the button is clicked.

Therefore, we’ll use this third line of code and the changeState() function to control the display of the Multi-state box. In this case, we’ll choose to change the state that the Multi-state box displays to the packaging state.

The highlighted code here shows us the entire onClick function and tells us that, when the packaging button is clicked, the Multi-state box will show the packaging state.

Let’s do the same for the art direction button. When it’s clicked, we want that to trigger the display of the art direction state.

To do this, we’ll run the changeState() function on the Multi-state box to display the artDirection state.

In the code you can see that we’re referring to each of the elements using the unique IDs we gave them earlier on, plus a hashtag.

You can also see these IDs in the layers panel. Note that these IDs are case sensitive…

…so keep that in mind when you’re setting up different IDs for your own designs. If you choose to change the IDs of the elements, don’t forget to adjust them in the code as well.

Let’s click preview to see how the Multi-state box is behaving. The art direction state is displayed by default when the site loads and, when we click each button, the state changes.

If we switch to tablet, the states also change because the code we added applies to all breakpoints.

We’ll also check it out on mobile to make sure the design looks good there too. Great, the box is behaving responsively. However, we still don’t have any visual indication on these buttons to show which state we’re on, so if you’d like to add that, we can do so by returning to edit mode.

Once we open the Inspector panel and click the design icon, we can see that our buttons have options for three states: regular, hover and disabled.

The button text is black in the regular state, which we can see here. The button turns dark blue when users hover over it, and light blue in the disabled state. We can create the visual indication for the box state we’re on by referring to the button states in the code we’ll set up.

As we’ve mentioned, when the page loads, the art direction state is displayed. We want to visually indicate this using the button in the disabled state, meaning we want the button to be light blue.

To achieve this, we’ll add this code to the third line so that the button will be light blue as the page loads.

Next we need to add code to cause each button to change color once they’re clicked. With this line of code, when the button is clicked, its color will change to light blue since we are changing the button’s state to disabled.

Underneath, we’ll add this line of code. This means, when the packaging button is clicked, the other button will change color to black, setting it to the regular state by using the enable function.

We’ll apply the same logic to the art direction button. Inside the onClick function, in addition to changing the state, we’ll define that the art direction button will change to its disabled state and will therefore change in color to light blue. Plus, the packaging button will change in color to black and the button state will be switched to enabled.

Let’s take a final look at the site in preview mode to see the end result. Here you can see the visual indications when the site loads and when each button is clicked. Remember, you can always edit the appearance of a Multi-state box and its visual indicators. Plus, you can choose different triggers and apply them in the code to create Multi-state box behaviors to suit the site you’re creating.

Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.