CPP, just tested this and it works: <input type="radio" name="attr_splat" value="1" class="sheet-splat sheet-vampire" checked><span title="Vampire"></span>
<input type="radio" name="attr_splat" value="2" class="sheet-splat sheet-werewolf"><span title="Werewolf"></span>
<input type="radio" name="attr_splat" value="3" class="sheet-splat sheet-mage"><span title="Mage"></span>
<input type="radio" name="attr_splat" value="4" class="sheet-splat sheet-wraith"><span title="Wraith"></span>
<input type="radio" name="attr_splat" value="5" class="sheet-splat sheet-changeling"><span title="Changeling"></span>
<br>
<!-- etc, choose game type -->
<input type="radio" name="attr_tab" value="1" class="sheet-tab sheet-tab-1 sheet-common-tab" checked><span title="Tab 1"></span>
<input type="radio" name="attr_tab" value="2" class="sheet-tab sheet-tab-2 sheet-vampire-only"><span title="Tab 2"></span>
<input type="radio" name="attr_tab" value="3" class="sheet-tab sheet-tab-3 sheet-vampire-only"><span title="Tab 3"></span>
<input type="radio" name="attr_tab" value="4" class="sheet-tab sheet-tab-4 sheet-werewolf-only"><span title="Tab 2"></span>
<input type="radio" name="attr_tab" value="5" class="sheet-tab sheet-tab-5 sheet-werewolf-only"><span title="Tab 3"></span>
<input type="radio" name="attr_tab" value="6" class="sheet-tab sheet-tab-6 sheet-werewolf-only"><span title="Tab 4"></span>
<input type="radio" name="attr_tab" value="7" class="sheet-tab sheet-tab-7 sheet-mage-only"><span title="Tab 2"></span>
<input type="radio" name="attr_tab" value="8" class="sheet-tab sheet-tab-8 sheet-wraith-only"><span title="Tab 2"></span>
<input type="radio" name="attr_tab" value="9" class="sheet-tab sheet-tab-9 sheet-changeling-only"><span title="Tab 2"></span>
<input type="radio" name="attr_tab" value="10" class="sheet-tab sheet-tab-10 sheet-changeling-only"><span title="Tab 3"></span>
<!-- etc, choose tab -->
<div class="sheet-tab sheet-tab-1">
<!-- common tab contents -->
Common
</div>
<div class="sheet-tab sheet-tab-2">
<!-- vampire #1 tab contents -->
Vampire 1
</div>
<div class="sheet-tab sheet-tab-3">
<!-- vampire #2 tab contents -->
Vampire 2
</div>
<div class="sheet-tab sheet-tab-4">
<!-- werewolf #1 tab contents -->
Werewolf 1
</div>
<div class="sheet-tab sheet-tab-5">
<!-- werewolf #1 tab contents -->
Werewolf 2
</div>
<div class="sheet-tab sheet-tab-6">
<!-- werewolf #1 tab contents -->
Werewolf 3
</div>
<div class="sheet-tab sheet-tab-7">
<!-- mage #1 tab contents -->
Mage 1
</div>
<div class="sheet-tab sheet-tab-8">
<!-- wraith #1 tab contents -->
Wraith 1
</div>
<div class="sheet-tab sheet-tab-9">
<!-- changeling #1 tab contents -->
Changeling 1
</div>
<div class="sheet-tab sheet-tab-10">
<!-- changeling #1 tab contents -->
Changeling 2
</div>
<script type="text/worker">
on('change:splat', function() {
setAttrs({ tab: 1 }); // reset to common tab when switching splats
});
</script>
input.sheet-tab + span,
.sheet-tab {
display: none;
}
input.sheet-tab,
input.sheet-tab + span,
input.sheet-tab + span::before {
margin: 10px 0 10px 0;
}
.sheet-common-tab,
.sheet-common-tab + span,
.sheet-vampire:checked ~ .sheet-vampire-only,
.sheet-vampire:checked ~ .sheet-vampire-only + span,
.sheet-werewolf:checked ~ .sheet-werewolf-only,
.sheet-werewolf:checked ~ .sheet-werewolf-only + span,
.sheet-mage:checked ~ .sheet-mage-only,
.sheet-mage:checked ~ .sheet-mage-only + span,
.sheet-wraith:checked ~ .sheet-wraith-only,
.sheet-wraith:checked ~ .sheet-wraith-only + span,
.sheet-changeling:checked ~ .sheet-changeling-only,
.sheet-changeling:checked ~ .sheet-changeling-only + span { display: inline; }
input.sheet-tab-1:checked ~ div.sheet-tab-1,
input.sheet-tab-2:checked ~ div.sheet-tab-2,
input.sheet-tab-3:checked ~ div.sheet-tab-3,
input.sheet-tab-4:checked ~ div.sheet-tab-4,
input.sheet-tab-5:checked ~ div.sheet-tab-5,
input.sheet-tab-6:checked ~ div.sheet-tab-6,
input.sheet-tab-7:checked ~ div.sheet-tab-7,
input.sheet-tab-8:checked ~ div.sheet-tab-8,
input.sheet-tab-9:checked ~ div.sheet-tab-9,
input.sheet-tab-10:checked ~ div.sheet-tab-10 { display: block; }
input.sheet-splat,
input.sheet-tab {
width: 100px;
height: 20px;
z-index: 1;
position: relative;
opacity: 0;
}
/* For some reason, common tab label isn't getting displayed in this example, not sure why. */
input.sheet-common-tab { opacity: 1; }
input + span[title]::before {
display: inline-block;
}
input + span[title]::before {
content: attr(title);
border-radius: 5px;
background-color: #ccc;
text-align: center;
width: 100px;
height: 20px;
margin-left: -100px;
}
input:checked + span[title]::before {
background-color: #8cc;
}
For some reason, the common tab label is refusing to display for me, I've no idea why. For the purposes of the example, I've simply made that specific radio button visible to show it working.
