Did you know you can build fully functioning Tabs without JavaScript? It uses a clever “CSS Hack” involving hidden radio buttons and the :checked pseudo-class!

The Radio Hack

<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">Tab 1</label>
<div class="tab-content" id="content1">...</div>

CSS Implementation

When tab1 is checked, we show the element immediately following it.

.tab-content {
  display: none;
}
input#tab1:checked ~ #content1,
input#tab2:checked ~ #content2 {
  display: block;
}

Open the Live Demo and click between the tabs to see them update entirely driven by CSS!