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?
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.