Multi-state box.

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');

});

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