Intro

These are some awesome tabs!

• No JavaScript
• 100% Healthy, Plain CSS
• Barely any hackery
• Kind of verbose, HTML-wise...

Check out the source code!

Code

Kind of verbose, here is the Jade source. Most JS libraries still ask for similar markup that's hardly any better, though.

HTML (Jade) Code:

div.tv-tabs
  label.tv-tab(for='tv-tab-1') Tab Name!
  label.tv-tab(for='tv-tab-n') for attr equals the radio ids
 
input.tv-radio#tv-tab-1(name='any-group-name', type='radio', checked)
div.tv-content Content goes here!
 
input.tv-radio#tv-tab-n(name='any-group-name', type='radio')
div.tv-content More goes here!

Relevant CSS (Stylus) Code:

.tv-content
  display none
 
.tv-radio
  display none
 
  &:checked + .tv-content
    display block

The trick is in the details.

• Clicking on the labels is effectively the same as clicking on the input boxes
• The radio inputs are hidden with CSS
• When a radio is selected, their curious tab content neighbors show up
• That's it! The only drawback is you won't be able to style the selected tab without resorting to some JS, but that shouldn't be a very big deal.

?

Hey there!

• I blog at Pony Foo
• I tweet as @nzgb
• I push code to GitHub@bevacqua

Later...