HTML <div class="sheet-box sheet-combat-modifiers">
<!-- =====================MELEE COMBAT MODIFIERS=========================== -->
<div class="sheet-table">
<input type="checkbox" class="sheet-arrow" name="attr_modifier-toggle" checked/><span></span>
<div class="sheet-header"><div class="sheet-colX">MELEE MODIFIERS</div></div>
<div class="sheet-hold">
<!-- BUNCH OF CONTENT HERE -->
</div> <!-- End .sheet-hold -->
</div> <!-- .sheet-table -->
</div> <!-- end sheet box -->
<div class="sheet-box sheet-combat-modifiers">
<!-- =========================RANGED COMBAT MODIFIERS============================ -->
<div class="sheet-table">
<input type="checkbox" class="sheet-arrow" name="attr_modifier-toggle" checked/><span></span>
<div class="sheet-header"><div class="sheet-colX">RANGED MODIFIERS</div></div>
<div class="sheet-hold">
<!-- BUNCH OF CONTENT HERE -->
</div> <!-- End .sheet-hold -->
</div> <!-- .sheet-table -->
</div> <!-- end sheet-box combat modifiers -->
CSS /* ======== Sheet-arrow to hide things========*/
input.sheet-arrow
{
float: left;
}
input.sheet-arrow:checked ~ div.sheet-hold
{
display: none;
}
input.sheet-arrow[type="checkbox"], .sheet-arrow
{
opacity: 0;
width: 16px;
height: 16px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
input.sheet-arrow[type="checkbox"] + span::before
{
margin-right: 4px;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
content: "▼";
width: 14px;
height: 14px;
font-size: 12px;
}
input.sheet-arrow[type="checkbox"]:checked + span::before
{
content: "►";
}
