I have a set of tabs on my character sheet that function as radio buttons to show only one section of the character sheet at a time. I was thinking it would be more useful if each tab functioned as a toggle that shows/hides it's own section of the character sheet. I'd like them to still look like tabs though. I don't know that this is possible, but I'd bet it is. I just haven't figured out how yet. This is as far as I've gotten. Currently everything is shown, and clicking on the tabs doesn't do anything. If you have an idea, I'd be interested to hear it. <div class="mnu backgroundColor section">
<button class="toggle-showAbilities buttonStyle tab leftTab" type="checkbox" name="attr_abilities" >Abilities</button>
<button class="toggle-showPoints buttonStyle tab" type="checkbox" name="attr_points" >Points</button>
<button class="toggle-showAttacks buttonStyle tab" type="checkbox" name="attr_attacks" >Attacks</button>
<button class="toggle-showCasting buttonStyle tab" type="checkbox" name="attr_casting" >Casting</button>
<button class="toggle-showSkills buttonStyle tab" type="checkbox" name="attr_skills" >Skills</button>
<button class="toggle-showJournal buttonStyle tab" type="checkbox" name="attr_journal" >Journal</button>
<button class="toggle-showInventory buttonStyle tab" type="checkbox" name="attr_inventory" >Inventory</button>
<button class="toggle-showMagical buttonStyle tab" type="checkbox" name="attr_magical" >Magical</button>
<button class="toggle-showSpellbook buttonStyle tab" type="checkbox" name="attr_spellbook" >Spellbook</button>
<button class="toggle-showLeveling buttonStyle tab" type="checkbox" name="attr_leveling" >Leveling</button>
</div>
<div class='sheet-abilities'>
<h2>abilities/abilities</h2>
<derived>Sheet abilities Config/Settings goes here</derived>
</div>
<div class='sheet-points'>
<h2>points/points</h2>
<derived>Sheet points Config/Settings goes here</derived>
</div>
<div class='sheet-attacks'>
<h2>attacks/attacks</h2>
<derived>Sheet attacks Config/Settings goes here</derived>
</div>
<div class='sheet-casting'>
<h2>casting/casting</h2>
<derived>Sheet casting Config/Settings goes here</derived>
</div>
<div class='sheet-skills'>
<h2>skills/skills</h2>
<derived>Sheet skills Config/Settings goes here</derived>
</div>
<div class='sheet-journal'>
<h2>journal/journal</h2>
<derived>Sheet journal Config/Settings goes here</derived>
</div>
<div class='sheet-inventory'>
<h2>inventory/inventory</h2>
<derived>Sheet inventory Config/Settings goes here</derived>
</div>
<div class='sheet-magical'>
<h2>magical/magical</h2>
<derived>Sheet magical Config/Settings goes here</derived>
</div>
<div class='sheet-spellbook'>
<h2>spellbook/spellbook</h2>
<derived>Sheet spellbook Config/Settings goes here</derived>
</div>
<div class='sheet-leveling'>
<h2>leveling/leveling</h2>
<derived>Sheet leveling Config/Settings goes here</derived>
</div>
------------------------------------------------------------------------
input.toggle-showAbilities:not(:checked) ~ div.sheet-abilities,
input.toggle-showPoints:not(:checked) ~ div.sheet-points,
input.toggle-showAttacks:not(:checked) ~ div.sheet-attacks,
input.toggle-showCasting:not(:checked) ~ div.sheet-casting,
input.toggle-showSkills:not(:checked) ~ div.sheet-skills,
input.toggle-showJournal:not(:checked) ~ div.sheet-journal,
input.toggle-showInventory:not(:checked) ~ div.sheet-inventory,
input.toggle-showMagical:not(:checked) ~ div.sheet-magical,
input.toggle-showSpellbook:not(:checked) ~ div.sheet-spellbook,
input.toggle-showLeveling:not(:checked) ~ div.sheet-leveling {
display: none;
}
/* show the selected tab */
.sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities,
.sheet-tabstoggle[value="points"] ~ div.sheet-points,
.sheet-tabstoggle[value="attacks"] ~ div.sheet-attacks,
.sheet-tabstoggle[value="casting"] ~ div.sheet-casting,
.sheet-tabstoggle[value="skills"] ~ div.sheet-skills,
.sheet-tabstoggle[value="journal"] ~ div.sheet-journal,
.sheet-tabstoggle[value="inventory"] ~ div.sheet-inventory,
.sheet-tabstoggle[value="magical"] ~ div.sheet-magical,
.sheet-tabstoggle[value="spellbook"] ~ div.sheet-spellbook,
.sheet-tabstoggle[value="leveling"] ~ div.sheet-leveling {
display: block;
}