Want to know in-depth details on how you can set up a multistate box that creates a tab effect for your Wix website by using Wix Code a.k.a. Velo??

Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!

📚 WHAT WAS COVERED:

Add Buttons and Multi-State Box Elements to Editor

Create and Code the OnChange State Box Function

Add Finish Element to Editor

Save and Preview Results in Preview Mode

---

Code Snippet to follow along with the video:

Page Code

This loads the page code

$w.onReady(function () {
    button1_click()
});
}

Set each button function.

export function button1_click(event) {
    $w("#statebox8").changestate("State1");
}

export function button2_click(event) {
    $w("#statebox8").changestate("State2");
}

export function button3_click(event) {
    $w("#statebox8").changestate("State3");
}

export function button4_click(event) {
    $w("#statebox8").changestate("State4");
}
    

Set the statebox onChange Event Handler Function

const blackColor = "#000000";
const greyColor = "#C7C7C7";

export function statebox8_change(event) {
 const buttonNames = $w("#column5").childtren.filter((elem) => { return elem.id.includes("button") }).map((f) => { return f.id}); //[1,2,3,4]

    buttonNames.map((name, index) => {
 let button = $w(`"${name}`): // e.g. $w("#button1")
 let length = index+1;
 let state = "State"+length; // e.g. State1
 //console.log(state);
 if (event.target.currentState.id === state) {
            button.style.backgroundColor = blackColor;
        } else {
            button.style.backgroundColor = greyColor;
        }
    })
}
    

---

🖱️ SUBSCRIBE ►http://bit.ly/2NRVy6o

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

📺 MY PLAYLISTS :

Wix Tutorials for Beginners: http://bit.ly/3aA8mb3

Wix Tutorials 2020: http://bit.ly/2Rpa8V8

Wix Tips: https://bit.ly/2Qudip1

More here: https://bit.ly/3lAeEx4

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

💻 WEBSITE

Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!