Как плавно развернуть div?

Question

[Яна Егорова]

Есть div который изначально скрыт, но при клике на кнопку плавно разворачивается.
Способ с display: none, а потом display: block не подходит так как не плавный.
Способ с opacity: 0 , а потом opacity: 1 тоже не подходит так как нужно чтобы элемент убирался из потока.
Способ с max-height: 0, а потом max-height: *какое-то число* тоже не подходит так как со временем в div будут добавляться новые элементы и высота будет изменяться.

Как это сделать? Желательно решение на JavaScript.

Comments

[godsplane]

Сначала opacity:0 , потом display:none для скрытия
Для показа все наоборот.

[Miit]

возможно transition поможет?

Answer 1

[Кирилл Молчанов]

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

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

Вот, можно посмотреть здесь, возможно код не очень хороший, но суть уловить можно
https://codepen.io/Kirill9011/pen/BajEwBJ?editors=0010

Answer 2

[Spartak (Web-StyleStudio)]

Если в проекте используется jquery, то через .slideToggle() или аналог jQuery slideToggle на чистом Javascript