Hello
Brief summary
I’d like a text box (will have customer testimonials from CMS in it in future) to start with a fixed size container showing i.e 3 or so lines of the review, fading out to indicate there is more. then a user clicks on the drop down button and the container grows to fit the text content.
I can do this, badly, where the box will grow smoothly to a fixed size (em/px/rem etc) but if i set it to be 100% it doesnt animate well (jumps to the full size with no delay.)
Please see the page i created in my Read-only link for more info!
Thanks for any help - i suspect this is me being a total novice in CSS and size-inheritance hierarchy knowledge!
So what I did to get the silky smooth transition back varying length text was first remove the height set on the “text container” as you establish the initial height in the animation.
After testing it out I found that there was a small bug using this method as auto uses px instead of and so on the second click it was using the number for pixels as em which was about 680 em and trying to go back down to 6 em. This resulted in on the second click to it getting overly big and then smashing down.
To resolve this I found using pixels (roughly 100px = 6 em) in the remaining spots of where em was used in the animation solved this as shown below.
