If you decide to enclose the "tab" radio buttons in divs, then for each radio, you need a matching hidden checkbox at the top of the document hierarchy (or at least somewhere before the hidden sections). Then you can test against the checkbox to reveal the contents of the hidden section. Here's one you can play with: HTML <div class="sheet-container">
<input type="checkbox" name="attr_selectedTab" class="sheet-HiddenCheckbox" value="Tab1"/>
<input type="checkbox" name="attr_selectedTab" class="sheet-HiddenCheckbox" value="Tab2"/>
<input type="checkbox" name="attr_selectedTab" class="sheet-HiddenCheckbox" value="Tab3"/>
<div class="sheet-tabs">
<div class="sheet-tab-widget-container">
<input type="radio" name="attr_selectedTab" value="Tab1" />
<span title="Tab One"></span>
</div>
<div class="sheet-tab-widget-container">
<input type="radio" name="attr_selectedTab" value="Tab2" />
<span title="Tab Two"></span>
</div>
<div class="sheet-tab-widget-container">
<input type="radio" name="attr_selectedTab" value="Tab3" />
<span title="Tab Three"></span>
</div>
</div>
<div class="sheet-tabContents">
<div class="sheet-tab1-Content">
Tab 1 Contents
</div>
<div class="sheet-tab2-Content">
Tab 2 Contents
</div>
<div class="sheet-tab3-Content">
Tab 3 Contents
</div>
</div>
</div>
Css /* Messing around with Tabs for Firefox compatibility */
/* Hide the dummy checkboxes which we use to reveal tabs later */
input.sheet-HiddenCheckbox { display: none; }
/* Hide all the tabs. Later, we'll reveal them when the right checkbox is checked */
div.sheet-tabContents > div { display: none; }
/* Reveal the appropriate tab contents depending on which checkbox is checked. */
div.sheet-container input[type="checkbox"][value="Tab1"]:checked ~ div.sheet-tabContents div.sheet-tab1-Content,
div.sheet-container input[type="checkbox"][value="Tab2"]:checked ~ div.sheet-tabContents div.sheet-tab2-Content,
div.sheet-container input[type="checkbox"][value="Tab3"]:checked ~ div.sheet-tabContents div.sheet-tab3-Content {
display: block;
position: relative;
background-color: wheat;
width: 100%;
height: 200px;
border-bottom-left-radius: 16px;
}
/* Style the tabs */
div.sheet-tabs {
display: block;
height: 30px;
}
div.sheet-tabs div.sheet-tab-widget-container {
/* set this up as the reference box for the successive inputs and spans */
position: relative;
display: inline-block;
width: 20%;
}
div.sheet-tabs input[type="radio"],
div.sheet-tabs input[type="radio"] + span {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
div.sheet-tabs input[type="radio"] + span {
z-index: 2;
background-color: burlywood;
pointer-events: none;
line-height 12px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
div.sheet-tabs input[type="radio"] + span:before {
content: attr(title);
}
div.sheet-tabs input[type="radio"]:checked + span {
background-color: wheat;
box-shadow: 3px -4px 4px 0 dimgrey;
}
