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
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