Hey everyone!
I’ve seen this gif around the Weweb forums somewhere and noticed that someone managed to get the accordion menu to smooth transition downward / upward when opened or closed. You can see on the gif below that the transitions are smoothed.
Would anyone be so kind to share how this can be achieved?
It’s kinda tough, because you have to jack it with custom code (CSS). I’ve created my own accordeon component for this actually.
Hey @Broberto, thanks a lot for the comment. I just wanted to update that I eventually figured this out.
This can be achieved via setting the min-height and max-height params of the accordion with a formula like if(accordion==true,"100px","50px"), make sure that overflow is set to hidden on the divs, along with a transition effect to make sure this is smoothed out.
Thanks again, appreciate it!
This will be limited to the fixed units though, and will not scale with the content growing right? Like if your content height is 200px on mobile / on a different screen size (and you have set max-height to 100px), it will get cropped.
With the setup I mentioned unfortunately yes. fit-content doesn’t adhere to transitions so it can get a little tricky… It can definitely be achieved with some JS but I’m not a fan of that idea either.
My particular use case is more of a predefined height value for a side menu, and it won’t work if the height is dynamic. I’ll try to tinker with it though and see if anything changes
You can jack this as I said, I have it right here in one of my design systems, but it requires custom CSS. It would be great, if we could define Library wide custom CSS @aurelie
Would love if you could share some of the CSS if possible, that would really help 
I think I based it off this tutorial 
Hero! I thought about this initially but for some reason I decided to skip with a fixed-height workaround. This definitely validates my thoughts that its best done via grid rows since they are transition compatible. Its definitely much better for responsiveness
Thanks a ton 
This brings me to the most annoying factor that actually got me to give up on this idea initially; how do you set the display to grid? via CSS on the wrapper doesn’t do much — it stays as flex.
Mind sharing a bit more if possible? 
I did it through custom css tab and a lot of tinkering actually
Gotcha, thanks 
Is there a video tutorial explaining step by step how to program this accordion feature in order to obtain a smoother opening and closing?