I'd like to point out a pitfall of the second method: if you have multiple elements that you need to collapse and their heights differs considerably, the animation will seem to "lag" for shorter elements because of their max-height property being much higher than their actual height.
I often use your proposed solution for quick collapses but the only solution if you want perfect collapses involves pure Javascript and Element.scrollHeight property
I'd like to point out a pitfall of the second method: if you have multiple elements that you need to collapse and their heights differs considerably, the animation will seem to "lag" for shorter elements because of their max-height property being much higher than their actual height.
I often use your proposed solution for quick collapses but the only solution if you want perfect collapses involves pure Javascript and Element.scrollHeight property
I'm glad you pointed this out