Introduction

A multi-state box is a container that holds multiple states, each displaying different content based on specific situations. For example, you can use a multi-state box to:

  • Show different site content when a shopping cart is empty or full.
  • Display an error state when something goes wrong.
  • Show a preloader while a page is loading.
  • Switch between "sale," "new," and "out of stock" badges for your products.
  • Display different content based on upcoming events.

Design multi-state boxes using the editor, and then add code to control how and when to display the different states. A multi-state box can only display 1 state at a time. Use the available functions and event handlers for the multi-state box to create conditions that allow states to appear automatically, or to enable site visitors to navigate between them.

Important Code is required to control the display of the different states in a multi-state box. You can add a multi-state box to your site, but it won't function without enabling and adding code. In Wix Editor, the option to add a multi-state box appears only if coding is enabled.

State IDs

Each multi-state box and state has a unique ID. To refer to them in code, you might want to rename them to more logical names. To view and rename state IDs:

  1. Select the multi-state box and click Manage States.
  2. Click the More Actions button and click Rename (Wix Studio) or Edit ID (Wix Editor).

You can also change the multi-state box ID and state IDs in the Properties & Events panel.

Warning Changing the ID of a multi-state box or state breaks any existing code. If you change an ID, update any related code.

Accessibility

It's important to ensure that multi-state boxes are accessible to all visitors. You can enhance your site's accessibility by:

  • Adding accessibility properties for the multi-state box either through code or by setting them in the editor.
  • Focusing on an interactive element, such as a button, inside the multi-state box after a state changes. This approach: - Allows site visitors to directly access elements in the multi-state box using keyboard navigation. - Provides a visible indication of which element is currently selected. - Enables screen readers to convey context, helping visitors see, hear, and understand the displayed content and available actions.

See also

To learn more, try the tutorial for Working with Multi-state Boxes and Code.

Get hands-on experience with multi-state box on our Hello Multi-state Boxes example page.

Note: Google's crawlers access only the content that would be initially displayed in the multi-state boxes. This may impact SEO if important information is hidden within these boxes.

Did this help?