This is long overdue! I created this last month before I started working and I love the result. I saw this accordion originally at Ch3mical.com, a portfolio by Paul Kelley. He had achieve this effect using images and jQuery. I decided to replicate the effect using pure CSS and font icons.

For a better experience, I suggest you to go to CodePen and view this effect on full page. It is acting a bit funky on the embedded version because of the smaller window size. And use Google Chrome! I didn’t know that it didn’t work well on Firefox. I need to fix the Firefox bug later (and also the small window size bug). But don’t count on it though; I am planning to move on to other stuff or create new pens. Since I have a short attention span, it doesn’t really allow me to work on same stuff for too long.

Achieving this effect is pretty simple, the main targeting element to animate would be the width of the list container, the left margin of the icon container, and the background gradient of the icon container.

The initial positioning of the elements can be a bit tricky. I won’t even attempt to explain it through words since it is futile. Have fun looking through the code and experiment with it! I hope you enjoy this one as much as I do! I know the people at CodePen enjoyed it since it was under the popular page for quite sometime!