<details> <summary>Example</summary> Height needs to be set for this to work. Works on Chrome, haven't tested further. </details> //Build in transition smooothly details { transition: height 1s ease; overflow: hidden; } details:not([open]) { height: 1.25em; } details[open] { height: 2.5em; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter