Something like this? <input type="radio" name="attr_splat" value="1" class="sheet-splat sheet-vampire" checked><span></span>
<input type="radio" name="attr_splat" value="2" class="sheet-splat sheet-werewolf"><span></span>
<!-- etc, choose game type -->
<div class="sheet-benisbackground sheet-vampire-only" style="background:url('<a href="http://i0.kym-cdn.com/entries/icons/facebook/000/019/615/120_-_benis.jpg" rel="nofollow">http://i0.kym-cdn.com/entries/icons/facebook/000/019/615/120_-_benis.jpg</a>') no-repeat;"></div>
<div class="sheet-benisbackground sheet-werewolf-only" style="background:url('<a href="http://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/13423494_519006621634276_165608611_n.jpg?ig_cache_key=MTI3MjEzMjgzMTE2NTQ2MDM5NA%3D%3D.2" rel="nofollow">http://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/13423494_519006621634276_165608611_n.jpg?ig_cache_key=MTI3MjEzMjgzMTE2NTQ2MDM5NA%3D%3D.2</a>') no-repeat;"></div>
<input type="radio" name="attr_tab" value="1" class="sheet-tab sheet-tab-1"/><span class="sheet-tab"></span>
<input type="radio" name="attr_tab" value="2" class="sheet-tab sheet-tab-2 sheet-vampire-only"/><span class="sheet-tab sheet-vampire-only"></span>
<input type="radio" name="attr_tab" value="3" class="sheet-tab sheet-tab-3 sheet-vampire-only"/><span class="sheet-tab sheet-vampire-only"></span>
<input type="radio" name="attr_tab" value="4" class="sheet-tab sheet-tab-4 sheet-vampire-only"/><span class="sheet-tab sheet-vampire-only"></span>
<input type="radio" name="attr_tab" value="5" class="sheet-tab sheet-tab-5 sheet-werewolf-only"/><span class="sheet-tab sheet-werewolf-only"></span>
<input type="radio" name="attr_tab" value="6" class="sheet-tab sheet-tab-6 sheet-werewolf-only"/><span class="sheet-tab sheet-werewolf-only"></span>
<div class="sheet-tab sheet-tab-1">
<!-- common tab contents -->
Common
</div>
<div class="sheet-tab sheet-vampire sheet-tab-2">
<!-- vampire #1 tab contents -->
Vampire 1
</div>
<div class="sheet-tab sheet-vampire sheet-tab-3">
<!-- vampire #2 tab contents -->
Vampire 2
</div>
<div class="sheet-tab sheet-vampire sheet-tab-4">
<!-- vampire #3 tab contents -->
Vampire 3
</div>
<div class="sheet-tab sheet-werewolf sheet-tab-5">
<!-- werewolf #1 tab contents -->
Werewolf 1
</div>
<div class="sheet-tab sheet-werewolf sheet-tab-6">
<!-- werewolf #1 tab contents -->
Werewolf 1
</div>
<div class="sheet-tab sheet-werewolf sheet-tab-7">
<!-- werewolf #1 tab contents -->
Werewolf 1
</div>
<script type="text/worker">
on('change:splat', function() {
setAttrs({ tab: 1 }); // reset to common tab when switching splats
});
</script>
css div.sheet-tab{
display: none;
}
.charsheet
{
}
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
{ display: block; }
.sheet-benisbackground {
float: left;
position:absolute;
clear:both;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index:-1;
}
input.sheet-vampire:checked ~ .sheet-vampire-only,
input.sheet-werewolf:checked ~ .sheet-werewolf-only
{
display:inline;
}
.sheet-vampire-only, .sheet-werewolf-only
{
display:none;
}
.charsheet input.sheet-tab {
width: 50px;
height: 20px;
cursor: pointer;
opacity: 1;
z-index: 9999;
margin-bottom:10px;
}
.charsheet span.sheet-tab {
background: white;
color: black;
width: 50px; /*originally 87px*/
height: 20px; /*originally 20px*/
border:2px solid black;
}
.charsheet input.sheet-tab:checked + span.sheet-tab {
background: black; /*originally ab8b57*/
color: white; /*originally white*/
border:2px solid white;
}
