CSS-only accordion without any form element
See the Pen CSS-only accordion without any form element by Jan Blasko (@lucien144) on CodePen.
This is an example of really simple css-only accordion. Most css-only accordions are based on checkbox/radio elements so the code is not really clean and semantic.
The example does not use any form elements and the HTML is simple and clean, based on the content (Content is King! :)). So every accordion's tab is basically an article with header and body. All magic is done by using pseudo-selector :target and transitioning max-height with opacity. The only limitation is you have to set the max-height for the selected tab. As a default value I set it to 1000px, so you have to keep in mind you have to increase it in case of very long content - longer than 1000px. This is crucial as the transition does not work on "height" or "max-height: auto;" - the only way is to set the max-height.
I'm avoiding any complex animations on purpose as I want this as much clean as possible. Add your own animations/transitions during the implementation process. There are million ways how to do this and even more examples.
Check it our. I'd be pleased for any comments, likes and shares.
The code has not been tested yet, but according to http://caniuse.com/#search=target it should work in all major browsers without any glitch, including IE9.