How to Expand & Collapse an Element With Effects?

Discussion Ask a question
,
1

Hello,

I would like to know how to add effects when I expand and collapse some elements on my site. Fade, Roll, Slide, Bounce and etc.

I’m trying this code bellow whit some effects variations but dont works. The object just appears and disappears with no effect:

export function button1_click(event, $w) {
if ($w(‘#box1’).collapsed) {
$w(‘#box1’).expand(‘roll’);
}
}

Any suggestions?

Thanks in advance!

1 Like
2

Hello Raniere,

Unfortunately, this is not possible, but one potential work around would be to set that element as both collapsed and hidden on load, then when that element is expanded you can chain a .then() after and do .show(‘animation-name’);

Sort of like this:

 $w("#myElement").expand() 
   .then( () => {     
      $w('#myElement').show('roll')
   } );

Goodluck!
Majd

1 Like
3

I am also dealing with a SlideIn Effect for a my Site Seach (App) that expands/collapses after an onClick event of a search icon. The code of Majd is not working as substitute.

I have a second issue that is the reseizing of my Header. I would like my Header to resize each time the search bar expands and collases. Any idea on that.

My site: www.chicdog.cl

NOTE: I am doing this only for the mobile site.

Please help!

4

I just did that… just insert the code on the site instead on the page section. and a box on the header collapsed on load!