Pure CSS Accordion Behavior

This pair of accordions uses nothing but CSS to create the effect. CSS3 Transitions are used for the animation.

This, however, introduces a trap: because the animation has to choose one of the animate-able attributes, I settled on max-height. Unfortunately, although the spec says you can use percentages for this, it doesn’t work in a vertical composition like this, and I was forced to set the “open” state to a fixed pixel max-height in order to make the effect work. This is clearly sub-optimal, as it screws with the duration. But since the goal is to do this entirely without JavaScript, it appears to be the only way.

Here’s the original version, which snaps back and forth using display:none/block.