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

A constant work in progress


  1. Thanks Jupiter St John

  2. Nice. Any way to use the "checkbox trick" for making tab active to avoid use of JS ?

  3. possibly, this is just an example to 'show the way'.

    I'm thinking your idea might not work in opera mini because of how that browser works.

  4. amazing idea!

  5. Very nice. If you don't mind, I forked for a small optimization of using '$(this)'

  6. Got into using this idea, but quickly ran into issues with content below it. Since the tab contents are absolutely position, they're out of the flow, and will overlap content below. It could be hacked with JS, but I'd rather not have to do that...

    Oh, CSS...

    Oh and BTW, accordi o n

  7. This solution doesn't work if you have content below

  8. Thank you! I had to make some modifications for my specific site but this helped me tons. I also had an issue with using position: absolute. Works great otherwise.

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

You must be logged in to comment.