take a look at this post by Brian on doing tabs. Note that most of the CSS is to turn the radioboxes into buttons, the only required CSS for it to work is: div.sheet-tab-content { display: none; }
input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; } This will hide any divs with the class sheet-tab-content and then show only those divs with the class sheet-tabX where the matching radiobox with the same class is checked. Make sure the inputs are in the same parent as the divs used to show/hide things are. This <div>
<input type="radio" name="attr_tab" class="sheet-tab1" checked="true"/>
<input type="radio" name="attr_tab" class="sheet-tab2" />
<div class="sheet-tab-content sheet-tab1"> tab 1a </div><!-- this will show -->
<div class="sheet-tab-content sheet-tab2"> tab 2 </div>
<div class="sheet-tab-content sheet-tab1"> tab 1b </div><!-- this will also show -->
</div> will work, while this <div>
<input type="radio" name="attr_tab" class="sheet-tab1" checked="true"/>
<input type="radio" name="attr_tab" class="sheet-tab2" />
</div>
<div>
<div class="sheet-tab-content sheet-tab1"> tab 1a </div>
<div class="sheet-tab-content sheet-tab2"> tab 2 </div>
<div class="sheet-tab-content sheet-tab1"> tab 1b </div>
</div> won't. Thought, this can be used to make multiple layers of tabs: <div>
<input type="radio" name="attr_tab" class="sheet-tab1" checked="true"/>
<input type="radio" name="attr_tab" class="sheet-tab2" />
<div class="sheet-tab-content sheet-tab1"> tab 1a </div><!-- this will show -->
<div class="sheet-tab-content sheet-tab2"> tab 2 </div>
<div class="sheet-tab-content sheet-tab1"><!-- this will also show -->
<input type="radio" name="attr_tab2" class="sheet-tab1" />
<input type="radio" name="attr_tab2" class="sheet-tab2" checked="true" />
<div class="sheet-tab-content sheet-tab1"> tab 1b.1 </div> <div class="sheet-tab-content sheet-tab2"> tab 1b.2 </div><!-- this will show but only while the parent also is shown -->
</div>
</div>
