Add fade effect on element expand/collapse

Ask the community
,
1

Hi everybody,
I created a section with 2 elements (boxes) that appear when you click on a button (#button1, #button2 in my example).
But the boxes appear in an abrupt/direct way.
I wish to add a fade effect when they appear and I don’t know what part of the code I should modify or add?

Here is my code :

$w . onReady ( function () {
$w ( “#button1” ). onClick (() => {
if ( $w ( “#box1” ). collapsed ) {
$w ( “#box1” ). expand ();
$w ( “#box2” ). collapse ();
}
});

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

Someone to help me ? :joy:
Thanks for reading
Best

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 ???

3

@russian-dima
Thanks a lot, yes I understood and applied this and it works very well. Thanks.

But I face another problem for the creation of my element… I don’t know if it’s because of the “async/await” or my global code but its work perfectly on desktop but doesn’t work on tab and mobile …
On tab and mobile, after the first “CTA call”, all boxes disapear !? I don’t know why !

If you see where is the problem, I would be very grateful :slight_smile:

here is my editorx building and my js code :
(online link : https://www.monwww.ch/solutions)

The goal is that only one of the 4 boxes appears at a time …
#box1 #box2 and #box3 are set to “collapse” (on default value)

https://static.wixstatic.com/media/c1cae1_9616b4e78adf4c01848a807951bc04cb~mv2.png(image larger than 4 MB)

$w . onReady ( function () {
$w ( "# button01 " ). onClick ( async ()=> {
if ( $w ( “#box1” ). collapsed ) {
$w ( “#box1” ). expand (), $w ( “#box1” ). show ( “fade” )
await $w ( “#boxInitial,#box2, #box3” ). hide (); $w ( “#boxInitial,#box2, #box3” ). collapse ();
}
});

$w ( "# button02 " ). onClick ( **async** ()=> { 
    if  ( $w ( "#box2" ). collapsed ) { 
        $w ( "#box2" ). expand (),  $w ( "#box2" ). show ( "fade" ) 
        **await**  $w ( "#boxInitial,#box1, #box3" ). hide ();  $w ( "#boxInitial,#box1, #box3" ). collapse (); 
    } 
}); 

 $w ( "# button03 " ). onClick ( **async** ()=> { 
    if  ( $w ( "#box3" ). collapsed ) { 
        $w ( "#box3" ). expand (),  $w ( "#box3" ). show ( "fade" ) 
        **await**  $w ( "#boxInitial,#box1, #box2" ). hide ();  $w ( "#boxInitial,#box1, #box2" ). collapse (); 
    } 
}); 

$w ( "# button002 " ). onClick ( **async** ()=> { 
    if  ( $w ( "#box2" ). collapsed ) { 
        $w ( "#box2" ). expand (),  $w ( "#box2" ). show ( "fade" ) 
        **await**  $w ( "#boxInitial,#box1, #box3" ). hide ();  $w ( "#boxInitial,#box1, #box3" ). collapse (); 
    } 
});     
    
$w ( "# button003 " ). onClick ( **async** ()=> { 
    if  ( $w ( "#box3" ). collapsed ) { 
        $w ( "#box3" ). expand (),  $w ( "#box3" ). show ( "fade" ) 
        **await**  $w ( "#boxInitial,#box1, #box2" ). hide ();  $w ( "#boxInitial,#box1, #box2" ). collapse (); 
    } 
}); 

$w ( "# button0001 " ). onClick ( **async** ()=> { 
    if  ( $w ( "#box1" ). collapsed ) { 
        $w ( "#box1" ). expand (),  $w ( "#box1" ). show ( "fade" ) 
        **await**  $w ( "#boxInitial,#box2, #box3" ). hide ();  $w ( "#boxInitial,#box2, #box3" ). collapse (); 
    } 
}); 

$w ( "# button0003 " ). onClick ( **async** ()=> { 
    if  ( $w ( "#box3" ). collapsed ) { 
        $w ( "#box3" ). expand (),  $w ( "#box3" ). show ( "fade" ) 
        **await**  $w ( "#boxInitial,#box1, #box2" ). hide ();  $w ( "#boxInitial,#box1, #box2" ). collapse (); 
    } 
}); 

$w ( "# button00001 " ). onClick ( **async** ()=> { 
    if  ( $w ( "#box1" ). collapsed ) { 
        $w ( "#box1" ). expand (),  $w ( "#box1" ). show ( "fade" ) 
        **await**  $w ( "#boxInitial,#box2, #box3" ). hide ();  $w ( "#boxInitial,#box2, #box3" ). collapse (); 
    } 
}); 

$w ( "# button00002 " ). onClick ( **async** ()=> { 
    if  ( $w ( "#box2" ). collapsed ) { 
        $w ( "#box2" ). expand (),  $w ( "#box2" ). show ( "fade" ) 
        **await**  $w ( "#boxInitial,#box1, #box3" ). hide ();  $w ( "#boxInitial,#box1, #box3" ). collapse (); 
    } 
});

});

:sleepy:

4

@sebastienroten
You are coding a lot for a little function.

Maybe you first test this one, and try to understand it…

let myBoxIDs=[]; 
    myBoxIDs[0] = "#box1";
    myBoxIDs[1] = "#box2";
    myBoxIDs[2] = "#box3";
  //myBoxIDs[3] = "#box4"; <-- activate more boxes here

$w.onReady(function () {
    $w("#button01").onClick(async()=> {close_allBoxes(); open_Box(0);});
    $w("#button02").onClick(async()=> {close_allBoxes(); open_Box(1);});
    $w("#button03").onClick(async()=> {close_allBoxes(); open_Box(2);});
});


function close_allBoxes() {
    for (let i = 0; i < myBoxIDs.length; i++) {
       $w("#box"+i).hide();
       $w("#box"+i).collapse();        
    }
}

function open_Box(ID) {$w("#box"+ID).expand();  $w("#box"+ID).show();}

What is different to your code?

  • this one first closes all boxes and immediately opens just the one you want have to be opened on the according button-click.
    -This one is more flexible → because you can easely add more buttons to work the same way, or you maybe want to delete some buttons.
    -this code is more compact.

After you got it to work, do the next step and add the ASYNC-AWAIT-function.
If it still do not work, you could maybe use → “setTimeout(()=>{},delayTimeHere);”
for your purposes as workaround.

Try it out and expand your coding horizons!

GOOD-LUCK!

5

@russian-dima
Many thanks for your time and help.
I understand your code and construction even if I am a rookie in velo …
It work perfectly.
I m going to add the fade effect and maybe back to you if … :grinning:
Thanks again and have a nice evening.
Seb