top of page

Add a Title

Add a Title
Published Date
{postDate}
Tags
0 Comments
Views
Share Post

Comment

successMessage

errorMessage

Add a Title

Add a Title

Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.

No comments yet. Be the first to comment!"
01 //
NEWS & UPDATES

Related Posts

Category

{publishedDate}

{postTitle}

{postParagraph}

Start Now
Category

{publishedDate}

{postTitle}

{postParagraph}

Start Now
Category

{publishedDate}

{postTitle}

{postParagraph}

Start Now

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!

Comments


bottom of page