Add fade effect on element expand/collapse

Ask the community
,
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: