How to add a multi-state box to your Wix website.

Multi-state boxes are a great way to expand and collapse word heavy content on your website. Most end users appreciate being able to scan websites and not necessarily read through dense and word heavy content. Collapsing certain areas of your website is a great way to allow users to 'Read More' on a subject when they choose so by clicking a button to expand collapsed text.

Below you will find a video to help you add and setup your multi-state box to your Wix website as well as the code that you will need to copy & paste within your editor to bring it all together. Be sure to turn on DEV Mode and get busy!

Expand and collapse dense heavy text on your website by using a multi-state box within the Wix editor.

Let's put it together.

Navigate to the top of your Wix Editor and select Dev Mode> Turn on Dev Mode. Once Dev Mode is turned on, your code panel will appear at the bottom of the editor.

Go ahead and add a Box > Multi-State Box element to your website. Copy & paste the code below to your code panel on the same page the multi-state box was added.

$w.onReady(function () { $w("#button1").onClick(() => { $w('#myStatebox').changeState("state2"); } ); $w("#button2").onClick(() => { $w('#myStatebox').changeState("state1"); } ); });

The important part to note about the code above is that all of your button labels (#button1 and #button2 above), box name (#myStatebox above) and states (state1 and state2 above) will reflect what ever ID you have labelled them within the code panel. If you choose to do the same as the code above that is perfectly fine as well. Just be sure they reflect the labels of your elements so the code executes as it should. Once done, go ahead and click Save then Preview to review your changes prior to Publishing your website. Need additional help? Click below to view our #youtube video showing you how to make this all come together.

View more of our self help videos on YouTube below.

View our YouTube Channel here.