css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Inspired by Ch3mical.com.

I saw this accordion at Paul Kelley's website. He had used jQuery and images to achieve the effect. I decided to take a CSS3 approach and use elements instead of images. I have use Genericons font for the social networking icons.


  1. If i move my mouse in from the right its super flickery; put the hover effects in an animation and use the delay method. This will remove the flickering! :-) v.nice though good job!

  2. @mattsince87 Thank you so much for the feedback, Matt! I will improve this demo with your suggestion. You mean, I should do the animation using keyframes instead?? I really appreciate your feedback. :D

  3. Awesome design! It's real clean and smooth.

  4. @fixcl Thanks for the suggestion, Marco. Did as suggested. @mattsince87 does it work better now to you?

    @rprojectonline Thank you, Richard. :)

  5. @rrenula Works great for me, but the font doesn't display properly. I just get blocks with text like F2 15 in it.

  6. Yea it's behaving real nice now. I may fork it later and have a little play :)

  7. I tried to use this code for my wesbite. but the images does not show up. also its not working for me.

    can you please help in this regard. I would like to use the same for my website. BTW nice stuff dude :) Thanks

  8. How can I make the first tab be open by default and close as others are selected?

  9. I remember building the ch3mical site years ago in the cafe at the agency I worked at for a friend. That's before browsers had great CSS3 support. Nice to see it someone did a non JS/jQuery version of this.

  10. Also @keyframe is a viable option but you will still need JavaScript to listen for the CSS animation callbacks and hope they're fully supported by all modern browser vendors. E.g. animation-play-state is a great place to start as well.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.