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.