Fluid CSS Accordion

[Historical Forums User]

I’ve been thinking about this for a couple of days and can’t find an elegant solution.

I’m wanting to build an accordion in preferably just CSS (or maybe a couple of lines of JS to add/remove an “expanded” class). The thing that’s different about this accordion is that I want it to be completely fluid, and it should be able to handle any amount of content that is placed inside it. That itself isn’t a problem – I’ve created something here that does that: http://jsfiddle.net/adrianosmond/HKcX3/

Now I want to animate the opening and closing of the accordion, and I’m stuck because I can’t know how tall hidden content will be. I’d also like to GPU accelerate the animation on browsers that have that option available.

Does anyone have any bright ideas about how this could be achieved?

Thanks a lot,
Adrian.

[Merri]

I had my lightbulb blinking at me.

http://codepen.io/Merri/pen/FpgBx

**Edit!**

Oh darn, not working fully as planned. Margin-top of course bases it’s percentage to the width, not height, so it currently fails if there is tons of content.

**Edit #2!**

Now each child under .toggle gets `margin-top: -100%` although that still depends on width of the `.content` element. So very tall inner contents like a tall image can break it.

[Historical Forums User]

Yeah, that was what I was struggling with. And as your screen width goes down, the height of the content element will only get longer. Maybe I’ll have to give in and use JS to do some measurements each time you click.

Thanks,

Adrian.

[Author]

Posts