Mamy div który ma wysokość ustawioną na height: 0;. Po kliknięciu chcemy aby była "gładka" animacja pojawiąjącego się tekstu. Jest jeden problem, po toggle wysokość jest ustawiana na auto i zamiast "gładkiego" przejścia z wysokości 0 do auto, div po prostu się pojawia zamiast zwiększyć wysokość dynamicznie.
Powiesz, a czemu nie ustawić wysokości na konkretną "height i tutaj jest problem bo strona jest dynamiczna, więc wysokość tego diva z tekstem również jest dynamiczna.
Dobra najpierw pokażę jak to wygląda normalnie:
<button>Toggle</button>
<div class="expandable">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
deserunt porro nostrum dignissimos eveniet aperiam harum! Illum et eos
atque. Dolorem, dolor deleniti impedit quibusdam nobis numquam quae
maiores itaque? Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Et harum, minus, odit impedit id soluta nostrum nemo repudiandae fugit
voluptatum voluptatibus fugiat quas cupiditate necessitatibus sunt numquam
adipisci libero, deserunt distinctio deleniti quo eligendi?
</div>
