I've been making my own custom character sheet for a while now (without any prior knowledge of html, css or javascript) and there is this small thing that keeps bothering me. My innate laziness and love for neat things both are protesting the idea of creating multiple html styles that effectively make the same thing. I wonder if it is at all possible to create something like: .sheet-md-npc_options {
visibility: collapse;
}
...
.sheet-is_checked:checked ~ .sheet-md-npc_options {
visibility: visible;
} and have it fold and unfold multiple div classes one at the time without initializing bunch of styles with only difference being their names? Say something like: <div class="l-mgrid-body">
<!-- TABLE ONE -->
<input class="is_checked" type="checkbox" name="attr_is_checked">
<div class="md-npc_options">
<!-- ROW ONE -->
<!-- ROW TWO -->
<!-- ROW THREE -->
</div>
</div>
<div class="l-mgrid-body">
<!-- TABLE TWO -->
<input class="is_checked" type="checkbox" name="attr_is_checked">
<div class="md-npc_options">
<!-- ROW ONE -->
<!-- ROW TWO -->
<!-- ROW THREE -->
</div>
</div> So far I found out this sort of works: .sheet-l-mgrid-body:hover > .sheet-is_checked:checked ~ .sheet-md-npc_options {
visibility: visible;
} but it is incredibly wonky, and doesn't actually do want I want, it's just kind of emulating it instead. Is more elegant solution possible at all? Maybe
some sort of sheetworker or html/css wizardry?
