> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Working with Multi-State Boxes and Code
## Article: Working with Multi-State Boxes and Code
## Article Link: https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/working-with-multi-state-boxes-and-code.md
## Article Content:
# Velo Tutorial: Working with Multi-State Boxes and Code
A [multi-state box](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/about-multi-state-boxes.md) contains multiple states with different content, and displays one state at a time. Each state corresponds to a specific situation or status. You need to add code to your site to define when each state is displayed. This article demonstrates how to set up your multi-state box using code from [Velo](https://dev.wix.com/docs/develop-websites/articles/get-started/about-developing-websites.md).
## Set Up Your Multi-State Box
To set up your multi-state box, follow this general procedure:
1. [Add](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/setting-up-your-multi-state-box.md) a multi-state box to your page.
2. [Set up](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/setting-up-your-multi-state-box.md) your states.
3. Add [code](https://www.wix.com/velo/reference/$w.MultiStateBox.html) to define when each state will be displayed:
1. Define a condition (for example, a site visitor clicked a button, a product is out of stock).
2. Select your multi-state box using its ID.
3. Apply the [changeState()](https://www.wix.com/velo/reference/$w.MultiStateBox.html#changeState) function with the state you want to move to.
## Example 1: Site Visitors Change the State
This example shows how to set up your multi-state box so that site visitors can switch between states by clicking a button and then focus on the button in the currently displayed state to enhance keyboard and screen reader functionality for visitors with disabilities.
We added a multi-state box to our page called `myStateBox`, with two states called `state1` and `state2`. Then we added a button to each state for switching between the states.
>**Note**
> You can view and change your multi-state box and state IDs in the [Properties & Events panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md).
### State 1
Wix Editor:
Wix Studio:
* `myStateBox`: ID of my multi-state box.
* `state1`: ID of the current state, State 1.
* `button1`: ID of button to click to move to State 2.
### State 2
Wix Editor:
Wix Studio:
* `myStateBox`: ID of my multi-state box.
* `state2`: ID of the current state, State 2.
* `button2`: ID of button to click to move to State 1.
### Code
We added the following code to our [page tab](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-in-the-code-editor.md):
```javascript
$w.onReady(function () {
$w("#button1").onClick(() => {
$w("#myStateBox").changeState("state2");
$w("#button2").focus()
} );
$w("#button2").onClick(() => {
$w("#myStateBox").changeState("state1");
$w("#button1").focus()
} );
});
```
### Understanding the Code
- **Line 2-5**: Add an onClick event handler to `button1` in State 1.
- **Line 3**: Run the [`changeState()`](https://www.wix.com/velo/reference/$w.MultiStateBox.html#changeState) function on the `myStateBox` multi-state box, moving it from State 1 to State 2.
- **Line 4**: Run the [`focus()`](https://dev.wix.com/docs/velo/velo-only-apis/$w/button/focus.md) function on the `button2` element displayed in State 2.
- **Line 6-9**: Add an onClick event handler to `button2` in State 2.
- **Line 7**: Run the [`changeState()`](https://www.wix.com/velo/reference/$w.MultiStateBox.html#changeState) function on the `myStateBox` multi-state box, moving it from State 2 to State 1.
- **Line 8**: Run the [`focus()`](https://dev.wix.com/docs/velo/velo-only-apis/$w/button/focus.md) function on the `button1` element displayed in State 1.
### Adapt this Scenario
You can adapt this scenario to enable site visitors to:
* Switch between a brief description and a detailed block of text.
* Fill out a custom multi-step form.
* Navigate what appear to be multiple tabs.
## Example 2: State per Status
>**Note:**
>The images in this example show the multi-state box in the Wix Editor. The multi-state box in Wix Studio functions similarly to Wix Editor, with the only difference being its appearance, as demonstrated in the example above.
This example shows how to set up your multi-state box with code so that a different state is displayed depending on a particular status. The example uses Wix Store products, but you can adapt the example for other scenarios.
We added a multi-state box to our Wix Stores [product page](https://support.wix.com/en/article/customizing-your-wix-stores-product-page) that displays a different badge depending on the product's status.
We added 3 states to our multi-state box:
* Out of Stock
* On Sale
* Featured
### State 1: Out of Stock
* `badgeStatebox`: ID of my multi-state box.
* `outOfStock`: ID of the current state. For products that are out of stock.
### State 2: On Sale
* `badgeStatebox`: ID of my multi-state box.
* `onSale`: ID of the current state. For products that are on sale.
### State 3: Featured
* `badgeStatebox`: ID of my multi-state box.
* `featured`: ID of the current state. For products that are not on sale or out of stock.
### Code
Then we added the following code to the [page tab](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-in-the-code-editor.md) of our [product page](https://www.wix.com/velo/reference/$w.ProductPage.html):
```javascript
$w.onReady( function () {
wixLocationFrontend.onChange(() => {
$w('#myProductPage').getProduct()
.then( (product) => {
if (!product.inStock) {
$w('#badgeStatebox').changeState("outOfStock");
}
else if (product.price !== product.discountedPrice) {
$w('#badgeStatebox').changeState("onSale");
}
else {
$w('#badgeStatebox').changeState("featured");
}
} )
.catch( (error) => {
console.log(error);
} );
} );
} );
```
### Understanding the Code
**Line 2**: Use the [`wixLocationFrontend.onChange()`](https://www.wix.com/velo/reference/wix-location.html#onChange) function to check when a site visitor navigates to a new product on the product page. When the current product changes, do the following:
**Line 3**: Get all the information about the current product using the [`getProduct()`](https://www.wix.com/velo/reference/$w.ProductPage.html#getProduct) function.
**Lines 5-6**: If the current product is not in stock, change the multi-state box's state to `outOfStock` to display the Out of Stock badge.
**Line 8-9**: If the current product's discounted price is different than the regular price, this indicates that the product is currently on sale. If the product is on sale, change the multi-state box's state to `onSale` to display the On Sale badge.
**Lines 11-12**: If the product is neither out of stock nor on sale, change the multi-state box's state to `featured` to display the Featured badge.
**Lines 15-16**: If an error occurs while getting the product information, log the error to the console.
**Tip**
If you want some products not to display a badge at all, you could [hide()](https://www.wix.com/velo/reference/$w.MultiStateBox.html#hide) the multi-state box when particular conditions are met.
### Adapt this Scenario
You can adapt this scenario to:
* Show different site content if a shopping cart is empty or full.
* Display an error state when something goes wrong.
* Show different site content depending on whether there's an upcoming event.
* Display a preloader while the page is loading.
## Learn More
* [$w.MultiStateBox API](https://www.wix.com/velo/reference/$w.MultiStateBox.html)
* [$w.State API](https://www.wix.com/velo/reference/$w.State.html)
* [About Multi-State Boxes](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/about-multi-state-boxes.md)
* [Use a multi-state box to expand text with a Read More link](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/working-with-multi-state-boxes-and-code.md)