Tiffany B. Brown

26 September 2011

Toggle 'blind' effect with CSS3 transitions

Transitioning between an 'open' state and a 'closed' state when the height of your content is variable (making a transition of the height property inadequate).

What makes the magic? Using height: auto, and transitioning the min-height and max-height properties instead.

View the demo, or study / steal the code.

This example makes use of CSS3 transitions, and DOMTokenList / classList. There's also a fallback that uses className and some regular expression-ism in browsers that don't yet support classList.

Get CSS Master

Did you learn something from this blog post? You might like my book, CSS Master (second edition). It contains several nuggets of CSS joy like this one. Now available through SitePoint premium.

Buy now from SitePoint