Add fade effect on element expand/collapse

Ask the community
,
2

I do not see any integrated (coded) FADE-EFFECT inside your provided code!
Where is your, coded “fade–action” ???

You will have to use some code like…

//----showing element (box)--------------------------
$w ( “#box2” ). expand (); $w ( “#box2” ). show (‘fade’);

//----hiding element (box)--------------------------
$w ( “#box1” ). hide (); $w ( “#box1” ). collapse ();

But this still won’t work properly! WHY??? → Because you do not wait the fade-out-time, before collapsing the box!!!

How to solve it??? → maybe using a async+await? (optionaly → setTimeOut)

$w.onReady(function () {
    $w("#button1").onClick(async()=> {console.log("Button was clicked!!!);
        if ($w("#box1").collapsed) {console.log("Box-1 is collapsed!!!);
            $w("#box1").expand(); $w("#box1").show('fade');
            await $w("#box2").hide('fade'); $w("#box2").collapse();
        }
    });

    $w("#button2").onClick(()=> {
        if ($w("#box2").collapsed) {
            $w("#box2").expand();
            $w("#box1").collapse();
        }
    });
});

Do you recognize the difference between the action of button1 and button2 ???