It's possible, and pretty easy, You want the entire section inside a div or other container (its borders don't need to be visible).
The way I usually do it is to have a hidden input just before that container.
Then somewhere else on the sheet a checkbox with value="1" and the same name as that hidden input.
Finally create a CSS rule which checks the input value and hides or show the div as appropriate.
Here's an example. HTML:
<!-- Put this anywhere on the sheet. -->
<input type="checkbox" name="attr_toggle" value="1">
<!-- then your bit to hide -->
<input type="hidden" class="toggler" name="attr_toggle" value="0">
<div class="to-hide">
<!-- your big box of things to hide or show-->
</div>
And the CSS that makes it work:
.charsheet input[type="hidden"].toggler:not([value="0"]) ~ div.to-hide {
display: none;
}
If the checkbox is checked, the div and everything it contains will be hidden; if unchecked it is displayed.
You can reverse by changing value="0" to value="1" (in the CSS declaration, not the input)
Note: if you are using legacy code, the CSS need to be changed to this:
.charsheet input[type="hidden"].sheet-toggler:not([value="0"]) ~ div.sheet-to-hide {
display: none;
}
If you don't know what that means, don't worry about it - just try them both.
This works by checking the classes of the hidden input and the div. You can change the classes in the html, but make sure you change them to match in the CSS too.