Efecto acordeón con alto variable: propiedades CSS complejas

En el ejemplo que tengo ahora abierto tengo una animación que despliega los contenidos hacia abajo haciendo un pequeño barrido. Es el típico efecto de acordeón. En realidad lo he programado de tal manera que está haciendo una manipulación del alto de esa caja, y estoy forzando un alto fijo. Sin embargo, yo podría tener diferentes tipos de contenido aquí dentro, así que debería de encontrar alguna forma de conseguir que esta animación hacia abajo me la haga de una manera automática, quiero decir que me lo ponga con el mismo alto que el alto que tienen los contenidos dentro. Sin embargo, tengo un problema, y es que cuando yo hago que este height sea el auto, que es el que realmente consigue controlar el alto por defecto, veremos que la animación cambia completamente, no me está haciendo el mismo efecto, no me está aplicando, de hecho, la diferencia entre un alto y otro. Eso es debido a que le estoy pidiendo que calcule la diferencia entre el alto de 1,5 y un alto automático, y por eso precisamente no es capaz de hacerlo. Así que necesito replantear un poco cómo poder conseguir hacer esa animación del alto de un elemento y que sea dinámico. De hecho, en realidad, voy a replantear la animación para que además funcione como un acordeón de tal manera que me muestre los contenidos y me desplace hacia abajo el resto de los contenidos que hay. Para ello, lo primero que necesito es que no sea un bloque absoluto, y, por tanto, va a aparecer ese contenido justo debajo de su contenedor. Eso significa que no voy a necesitar la propiedad bottom, ni la voy a necesitar ni la voy a animar, de hecho, voy a quitar de momento toda esta transición. Voy a quitarle también la transformación horizontal, así que también voy a eliminarle toda esta parte, voy a quitarle el left, y, por último, tampoco me va a servir de nada ese alto porque, como digo, no lo voy a poder animar, así que voy a eliminar ese alto tanto en un lado como en el otro. Incluso este width tampoco lo voy a necesitar me muestre todo ese spam montado sobre el mismo bloque. Este spam, en principio, debería de estar colocado debajo, así que le voy a pedir que tenga un tipo de display: block. De ese modo, ahora cuando recargue, aparece ya como un bloque justo debajo de lo que es el rótulo. El siguiente paso es conseguir crear esa animación, y ¿cómo lo puedo conseguir? Bueno, pues, básicamente, yo digo que no puedo utilizar el alto, el height, pero, sin embargo, lo que puedo utilizar Si yo le digo que tenga un alto máximo de y además le aplico que tenga una propiedad overflow de hidden, lo que va a hacer va a ser tener un alto de 0 esa caja, pero además, ocultarme completamente esos contenidos, y, de ese modo, utilizando este max-height sí que puedo crear una animación. Así que aquí podría decirle que tuviese un max-height que sea lo bastante alto como para que siempre, absolutamente siempre, se muestren todos los contenidos, y luego lo que puedo hacer es hacer que se ejecute una transición sobre ese max-height, con un ease-in-out, por ejemplo, de un segundo de largo. Ahora, cuando recargue, veremos que al pasar por encima, efectivamente, ya me está generando esa transición y además, con un efecto de acordeón perfecto. A partir de aquí, ya sería simplemente mejorar este código, por ejemplo, poniéndole un poquito de margen superior, poniéndole, por ejemplo, 0,2 em. Por otro lado, haciendo que esa animación me la aplique tanto cuando se abre como cuando se cierra, para que quede mejor, solo que cuando se cierra, bueno, pues quiero que sea sin aceleración y un poco más rápida, puedo decirle, por ejemplo, que sea de 0,5 segundos, y ahora, cuando recargue me la va a hacer correctamente. me la va a hacer correctamente. Aquí, podemos observar como el sistema funciona gracias a la utilización Aquí, podemos observar como el sistema funciona gracias a la utilización de este max-height. de este max-height.