Раз ты в любом случае используешь Javascript, то играться с max-height и переключением классов смысла никакого нет. У блока есть неизменное значение его высоты, выраженное как scrollHeight, оно всегда отражается высоту контента блока, независимо от фактического размера. Вот задай транизицию на css на height, установи высоту блока равную scrollHeight, таким образом он зафиксируется, потом установи значение 300, тогда он плавно схлопнется. Чтоб раскрыть установи высоту в значение scrollHeight, блок плавно раскроется, после раскрытия (setTimeout поможет), поставь height: auto, чтоб блок вел себя адаптивно.
