Help with Section height transition please

Hello guys! i need some help. Please forgive any english mistake.

Im kinda new to this and trying to make a site for myself, i have some basic programming experience so it is going well but… I am, for some good hours, trying to do a list with collapsable/expandable elements using slider animation on the code, like on this site: https://pensarepsicologia.com.br in the “Tratamentos” tab, where when you click + on any of the topics the text appears sliding from top to bottom and the Section height is adjusted automatically in a smooth way, following the Slider animation. The same when you press -, but now the animation goes from bottom to top.

The collapsable/expandable animation took few seconds to make but i cant make the Section height have this transition like the animation, it always change her height in an abruptly way. Same Collapsable Text, when you click in “Read More”. Also the same with MultiState-Boxes, when i make it change from one State to another State with bigger height, even if try to animate the second one entrance the Section height just changes abruptly to the height of the second State. How do i make the section adjust its height in the same pace as the collapse/expand animation?

1 Like

This looks like the perfect case where you’ll want to use the accordion element.

It has transitions built in - so it’ll push/pull the height of the section smoothly. I would recommend using advanced sizing on the section, and setting the height to max-c

1 Like

meeh it was that simple… goddamit!

Really thanks!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.