You sheet-arrow checkboxes are way off to the right because you have "float:right" on it. The float attribute throws the item to the far sides without regard to anything else in the div. Removing that from the checkbox css (both the hide real check box part and the fake checkbox part) will likely mean you will have to line the two back up. Set the "real check box" opacity: 0.7 to make it some what visible Set both the real and fake checkbox to position: relative; Mess around with left and top entries until the two line up. This can take a few minutes. The rest was shown to me by Finderski in the linked post. He might explain it better than I do in the following. Basically, its to have two check boxes with the same name ( name="attr_same_as_the_other_one"). The one you want fight next to "Movement" should be put inside the heading tag, so it is in line and styled some what the same. The check box is place in the same <div>, <table> (and <td> or <th> if inside a table) as what you want to hide. Breaking this down, do this: First, separate your display arrow from the one that hides things. So, change you css from this /* -----Hiding areas with sheet-arrow ----- */
input.sheet-arrow {
float: right;
}
input.sheet-arrow:checked ~ div.sheet-body {
display: block;
}
to this input.sheet-hider:checked ~ div.sheet-body {
display: block;
}
Next, to hide the hidden checkbox, add this to the css sheet-hidden {
display:none;
} Now, to the html. put the display checkbox inside the heading tag (this might require more messing with the position until its where you want it). <h2 style="text-align: center;">Movement<input type="checkbox" class="sheet-arrow" name="attr_MovementHide" checked/><span></span></h2> Put a second checkbox outside the heading tag, next to what you want to hide, using the "sheet-hidden" and "sheet-hider" class you just made. <input type="checkbox" class="sheet-hider sheet-hidden" name="attr_MovementHide" checked/> It won't show it working on the preveiw pane, but in the game, every time you hit the display checkbox, every other checkbox with the same name also becomes checked. Thus, two checkboxes with the same name can hide/show things is different div's, etc.
