Table of Content

  1. Overview
  2. Elements
  3. Code
  4. YouTube Tutorial

Overview

Tutorial Example Video

Thinking of having a multi-state (toggle) box that changes as you click on buttons? Then this is the right tutorial for you. We will show you the step by step on getting this all ready and set up in your website in a matter of minutes.

Majority of wix users build their website with zero-code, and this has limited their ability to implement custom features in their websites. Well, that’s about to change. We will be utilizing basic coding techniques in getting this modern feature up and running in no time. You need little or no coding knowledge because you only have to copy and paste. YES! copy and paste. Let me show you!


Elements

The following elements are all you need to get this feature on your website today;

  • Multi-State Box:
Multi-State Box
You can find this element here.
  • Container Box: Used to hold the Toggle buttons
Container Box
  • Buttons

We need four buttons.

  1. About us left Black Button (#leftBtnBlack)
  2. About us Left White Button (#leftBtnWhite)
  3. Contact us Right Black Button (#rightBtnBlack)
  4. Contact us Right White Button (#rightBtnWhite
About Us: Black Button at the left with ID: #leftBtnBlack
About Us: Black Button at the left with ID: #leftBtnWhite
Contact us: White Button at the Right ID: #rightBtnWhite
Contact us: Black Button at the Right ID: #rightBtnBlack
A D V E R T I S E M E N T

Visit the links below to learn more about wix API and articles including examples you can implement on your website.


const glideOptionsRight = {
    "duration": 450,
    "angle": 270,
    "distance": 202
};
 
const glideOptionsLeft = {
    "duration": 450,
    "angle": 90,
    "distance": 202
};
 
const fadeOptions = {
    "duration": 100
};
 
$w.onReady(function() {
    $w('#leftBtnWhite').onClick(toggleFront);
    $w('#rightBtnBlack').onClick(toggleFront);
    $w('#rightBtnWhite').onClick(toggleBack);
    $w('#leftBtnBlack').onClick(toggleBack);
})
 
function toggleFront() {
    $w('#stateBox').changeState("back");
    $w('#leftBtnWhite').hide("fade", fadeOptions);
    $w('#leftBtnBlack').show();
    $w('#rightBtnBlack').hide("fade", fadeOptions);
    $w('#rightBtnWhite').show("glide", glideOptionsRight);
}
 
function toggleBack() {
    $w('#stateBox').changeState("front");
    $w('#leftBtnBlack').hide();
    $w('#leftBtnWhite').show("glide", glideOptionsLeft);
    $w('#rightBtnWhite').hide("fade", fadeOptions);
    $w('#rightBtnBlack').show();
}


YouTube Tutorial

https://www.youtube.com/watch?v=YRwdH21RFUY
Subscribe

Leave a Reply

Your email address will not be published. Required fields are marked *