Tiffany B. Brown

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.

5 Responses to “Toggle ‘blind’ effect with CSS3 transitions”

  1. Tom Cavill says:
    7 Aug 2012 at 2:46 pm

    This is great; concise and clean. Thanks.

    Do you know what adjustments are necessary to have this multiple times on one page?

    Thanks in advance, 
    Tom

  2. tiffanybbrown says:
    8 Aug 2012 at 9:19 am

    You should only have to change the item or items to which you attach the event handler. So if you want it to apply to all items with a .trigger class, you could.

  3. Tom Cavill says:
    8 Aug 2012 at 9:29 am

    I thought as much but couldn’t get it to work.

    Here’s my fiddle: http://jsfiddle.net/uB7X9/1/

    My JS ability is very low, so no doubt it’s something simple.

  4. tiffanybbrown says:
    10 Aug 2012 at 5:17 pm

    It’s not super simple. It does take a little more know-how. Step 1 is to use querySelectorAll() or getElementsByClassName() instead of querySelector() to get everything with a .foo class. querySelector() just returns the first such item. More here: http://tiffanybbrown.com/2011/08/12/meet-the-selectors-api/

    Then you can iterate over the entire list. Or use event delegation. I forked your fiddle, and included examples of how to do both.
    http://jsfiddle.net/MER4q/1/

  5. Tom Cavill says:
    11 Aug 2012 at 1:38 pm

    I see. Thanks for taking the time out; I’ve had a play in jsfiddle and think I understand it now. Much appreciated.