CSS-Based Animated Accordion

Posted in Experiments.

I was recently asked to publish a codecast on CSS Deck. CSS Deck’s Codecasts are realtime playbacks of the coding of an example, so you can follow along and see how a piece comes together.

I decided to show off a CSS-based animated accordion I designed for Get Around Maine. This example only uses CSS to create an interactive accordion that expands as you hover over its slides.

Click here to view my first codecast, or check out the result below:


4 Responses to “CSS-Based Animated Accordion”

  1. jphogan

    Is there any type of workaround for this to work in IE9 and older browsers or would it need to be a javascript solution? When I try to pull up the CSS Deck in IE, I can’t see anything except for the generic frames. (Your post is the first I’ve heard of CSS Deck, so I’m not sure if it’s common knowledge that it doesn’t show in IE).

    • pixleight

      I’m not sure what CSS Deck’s browser support is like, but their Codecasts are pretty new so I’m going to guess they haven’t made it IE compatible yet. I usually make things work in IE last myself.

      As far as the actual example goes, it should work in IE… just without any animation, since IE9 and below doesn’t support css-transitions. You can check out a full screen example here (or here if that still doesn’t show up in IE)


Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>