Animating max-height with CSS transitions

Question

I want to create an expand/collapse animation that\'s powered only by classnames (javascript is used to toggle the classnames).

I\'m giving one class max-heigh

Answer 1

The solution is actually quite simple. Make a child div, that has the content. The parent div will be the one that expands collapses.

On load the parent div will have a max-height. when toggling, you can check the child height by writing document.querySelector('.expand-collapse-inner').clientHeight; and set the maxheight with javascript.

In your CSS, you will have this

.parent {
transition: max-height 250ms;
}