Today we want to show you how to create simple accordion with zero dependencies in (fast) no time. With this simple and animated accordion, we are building up our Snippets category which (we hope so) will soon collect all the "frontend components" in one interesting way and give you a possibility to grab all our component snippets and code for free.
Attention: Note that we use modern CSS properties like a "viewport width or height" and "calc" property in this demo.
For this simple accordion, we used only CSS3 animations and a little bit power of jQuery. As said in our first "Snippets" Article, we will try to give you as much as possible simple codes and animated snippets which you can easily download and use in one or another way. As you can see in the accordion demo, the "active" state holds the main animation.
Accordion on the website collects often texts and common information ( e.g. FAQ Page ), but that doesn't mean that one accordion should be boring. Maybe our simple and animated accordion could give you some inspiration or help you to speed up your development with the old good method: "copy and paste code".
We hope you like this little effect, our simple code for accordion and find it useful!