Untitled

$w.onReady(function () {

 

    //DEFINE ACTIVE AND INACTIVE BUTTON COLORS 🤩

    const whiteColor = "#FFFFFF";

    const textColorActive = "#00AD63";

 

    const greyColor = "#FAFAFA";

    const textColorInactive = "#74767E";

 

    //ONCLICK FUNCTIONS FOR EACH BUTTONS. CHANGE STATE ✨

    $w('#firstButton').onClick(() => {

        $w('#stateElementId').changeState("firstState");
        $w('#firstButtonline').show()
        $w('#secondButtonline').hide()
        $w('#thirdButtonline').hide()

    });

 

    $w('#secondButton').onClick(() => {

        $w('#stateElementId').changeState("secondState");
        $w('#firstButtonline').hide()
        $w('#secondButtonline').show()
        $w('#thirdButtonline').hide()
    });

 

    $w('#thirdButton').onClick(() => {

        $w('#stateElementId').changeState("thirdState");
        $w('#firstButtonline').hide()
        $w('#secondButtonline').hide()
        $w('#thirdButtonline').show()
    });

 

 

    //CHANGE BUTTON COLORS IF THEY ARE ACTIVE OR NOT 🎉

    $w("#stateElementId").onChange((event) => {

 

        const buttonNames = ["first", "second", "third"];

 

        buttonNames.forEach(buttonName => {

            let button = $w("#" + buttonName + "Button");

            let state = buttonName + "State";

 

            if (event.target.currentState.id === state) {

                button.style.backgroundColor = whiteColor;

                button.style.color = textColorActive;

            } else {

                button.style.backgroundColor = greyColor;

                button.style.color = textColorInactive;

            }

        });

    });

});