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:
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.
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:
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.
It's important to ensure that multi-state boxes are accessible to all visitors. You can enhance your site's accessibility by:
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.