Another way to do this, relatively positioned box holding absolutely positioned tabs and inline radio inputs and +
in the selector to choose the visible one
<div class="tabbox">
<label for="tab1">A</label>
<input id="tab1" type="radio" name="tab" class="tabchoice" />
<div class="tabcontent">hello</div>
<label for="tab2">B</label>
<input id="tab2" type="radio" name="tab" class="tabchoice" />
<div class="tabcontent">world</div>
</div>
.tabbox {
position: relative;
}
.tabcontent {
position: absolute;
top: 20px;
left: 0;
display: none;
}
.tabchoice:checked + .tabcontent {
display:block;
}
You might need to do a bit more work for overflows etc, in production code