Hey guys, I'm working on my first character sheet, trying to have four different types and use Brian's hide technique above to change what displays. It seems to break though if a div class="hide" is within another div. I've tested this with the div classes [character, combat, and spacecraft] within the div class [main], with them inside of a div with no class defined, and with no div wrapper. Having a div wrapper, class defined or not, breaks it. Any thoughts? HTML <div style="display:inline-block;font-size:11px;color: #888888;text-align:left;font-weight: bold;">Sheet:</div>
<input type="radio" name="attr_sheetStyle" value="0" class="sheet-styleCharacter" checked="checked" title="Character Sheet" /><span>Character</span>
<input type="radio" name="attr_sheetStyle" value="0" class="sheet-styleCombat" title="Character Sheet" /><span>Combat</span>
<input type="radio" name="attr_sheetStyle" value="1" class="sheet-styleSpacecraft" title="Spacecraft Sheet" /><span>Spacecraft</span>
<input type="radio" name="attr_sheetStyle" value="4" class="sheet-styleNpc" title="NPC"/><span>NPC</span>
<div class="sheet-main">
<h3>
This Section Should Display for Character, Combat, and Spacecraft
</h3>
<div class="sheet-character">
This section should only display for Character.
</div>
<div class="sheet-combat">
This section should only display for Combat.
</div>
<div class="sheet-spacecraft">
This section should only display for Spacecraft.
</div>
</div>
<div class="sheet-npc">
<h3> This Section Should Display for NPC Only</h3>
</div>
CSS input[type=radio].sheet-styleCharacter,
input[type=radio].sheet-styleCombat,
input[type=radio].sheet-styleSpacecraft,
input[type=radio].sheet-styleNpc{
display: inline-block;
}
input[type=radio].sheet-styleNpc:checked ~ .sheet-npc{
display: inherit;
}
input[type=radio].sheet-styleNpc:checked ~ .sheet-main{
display: none;
}
input[type=radio].sheet-styleCharacter:checked ~ .sheet-npc,
input[type=radio].sheet-styleCombat:checked ~ .sheet-npc,
input[type=radio].sheet-styleSpacecraft:checked ~ .sheet-npc{
display: none;
}
input[type=radio].sheet-styleCombat:checked ~ .sheet-character,
input[type=radio].sheet-styleSpacecraft:checked ~ .sheet-character{
display: none;
}
input[type=radio].sheet-styleCharacter:checked ~ .sheet-combat,
input[type=radio].sheet-styleSpacecraft:checked ~ .sheet-combat{
display: none;
}
input[type=radio].sheet-styleCharacter:checked ~ .sheet-spacecraft,
input[type=radio].sheet-styleCombat:checked ~ .sheet-spacecraft{
display: none;
}
