Collapsible Sections with Multi-State Boxes

Want an easier method for creating collapsible sections on your Wix and Editor X websites? Well in this lesson, you will learn how to use Multi-State Boxes to accomplish this effect.

Now that you have set up your Multi-State Boxes, just copy the code from below and paste it into your "onReady" function that comes default on every page.

---

// Apple

$w('#image1').onClick(() => {
	$w('#multiStateBox1').changeState("msb1State2");
})

$w('#image2').onClick(() => {
	$w('#multiStateBox1').changeState("msb1State1");
})

// Pear$w('#image3').onClick(() => {
	$w('#multiStateBox2').changeState("msb2State2");
})

$w('#image4').onClick(() => {
	$w('#multiStateBox2').changeState("msb2State1");
})

---

Make sure you replace the ID's in the code to match the ID's for elements on your page for this to work properly.

Elements you need to change in the code:

• Image Elements

• image1

• image2

• image3

• image4

• Multi-State Boxes

• multiStateBox1

• multiStateBox2

• Multi-State Boxes States

• msb1State1

• msb1State2

• msb2State1

• msb2State2

Keep in mind you will have to copy this code if you have more than the 2 collapsible sections I showed in the video.

Hope you enjoyed this lesson!