Leonardo• 100
@ls-cabreira
Posted
The reason the transition is not smooth is because you are using the toggle method. When you add a class, there is no transition. A very popular solution that you can find on YouTube and the official W3S website is to change the element's height property and not its classlist.
Take a look at this article: https://www.w3schools.com/howto/howto_js_accordion.asp
Basically, you need to set the container's maximum height to 0 and add the following properties in the CSS:
transition: max-height, 200ms ease;
overflow: hidden;
In the article, you will see how to access the style attribute and change the height dynamically in your script.
I hope you find that feedback useful :)
0
