Как плавно развернуть div?
Способ с max-height: 0, а потом max-height: *какое-то число* тоже не подходит так как со временем в div будут добавляться новые элементы и высота будет изменяться.

Можно обернуть контент блока, у этой обёртки мы будем брать clientHeight и присваивать это значение в max-height родителя

Вот, можно посмотреть здесь, возможно код не очень хороший, но суть уловить можно
https://codepen.io/Kirill9011/pen/BajEwBJ?editors=0010
Если в проекте используется jquery, то через .slideToggle() или аналог jQuery slideToggle на чистом Javascript
