Introduction

A multi-state box is a container that holds multiple states, each displaying different content. You need to add code to control which state is displayed. You can set a multi-state box to change base on:

• Specific situations:
  • 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.
  • Display different content based on upcoming events.
• Site visitor interaction:
  • Navigate between what appear to be multiple tabs.
  • Switch between a brief description and a detailed block of text.

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.

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.

SEO

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. Learn more about SEO best practices.

See also

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