Hiding a section of a character Sheet unless certain box is ticked/Drop down is selected

Hi all, I've a section in my character sheet that is only useful to certain character types, and as such i'd like to hide it unless a certain criteria is met (I'm not too fussed about what that is, so it could be a series of checkboxes, the result of a drop down, etc.) The section itself is quite substantial, and consists of a number of drop downs, attribute boxes, and an arrowbox (which hides a number of other, similar things) . Is this possible, and if so, how would i achieve it with this group of objects?

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.

That's exactly what i needed, thank you! It all works perfectly, with one, weird exception. I've got three of these sections to hide, so i've built three distinct rules. The first and second grouping on my page toggle on and off perfectly, regardless of what combination of buttons are selected. My third section however only shows up when the section above is also toggled on (i can still toggle it on an off, it just only shows if the section above is visible). I've moved things around, and always get the same result. What have i missed? Cheers Chris

I'm not following your description of the problem. You'd need to include some code to show what's going on.