First of all... I've already gone through various posts here (and am using the CSS Wizardry suggestions to expand/collapse <div> sections in my custom sheet, but I can't for the life of me get the following problem licked... Objective: In Traveller game, there's a thing called "Boon" and "Bane" rolls. Essentially, a normal roll to succeed at something is 2d6; a boon roll is 3d6kh2, and a bane is 3d6kl2. I'm trying to create roll buttons that will detect the state of some sort of Boon/Bane/Normal selector and will make available a different set of buttons for each - with the appropriate {{roll = ...}} defined. Building a row of each type of button was the easy part. Getting only one set at a time to appear on the screen is a different problem. Here's a abbreviated form of the pertinent stuff I've got: In an area that forms a sort of header for the whole character sheet... <div class="sheet-section sheet-bordered-section"> <input class="sheet-boon-bane-radio" type="radio" name="attr_boon-or-bane" value="0" checked>Normal</input> <input class="sheet-boon-bane-radio" type="radio" name="attr_boon-or-bane" value="1">Boon</input> <input class="sheet-boon-bane-radio" type="radio" name="attr_boon-or-bane" value="2">Bane</input> </div> In the area where I'm trying to display the buttons... <div class="sheet-inner-body"> <table> <div class="sheet-normal-rolls"> <input type="hidden" class="sheet-roll-state" name="attr_boon-or-bane"/> <!-- the same name as the three radio options --> <tr align="center" class="sheet-normal-rolls"> <td><button>...stuff...</button></td> <!-- six buttons defined for "normal" rolls --> </tr> </div> <div class="sheet-boon-rolls"> <input type="hidden" class="sheet-roll-state" name="attr_boon-or-bane"/> <tr align="center" class="sheet-boon-rolls"> <td><button>...stuff...</button></td> <!-- six more buttons defined for "boon" rolls --> </tr> </div> <div class="sheet-bane-rolls"> <input type="hidden" class="sheet-roll-state" name="attr_boon-or-bane"/> <tr align="center" class="sheet-bane-rolls"> <td><button>...stuff...</button></td> <!-- six more buttons defined for "bane" rolls --> </tr> </div> ... more table rows... </table> </div> Finally, the pertinent CSS: input.sheet-roll-state:not([value='0']) + .sheet-normal-rolls { display: none; } input.sheet-roll-state:not([value='1']) + .sheet-boon-rolls { display: none; } input.sheet-roll-state:not([value='2']) + .sheet-bane-rolls { display: none; } NOTES: I have tried ~ instead of + I have tried tr.sheet-normal-rolls... etc. My thinking was to use the <input type: hidden ... > tag to essentially reference the radio button value (by using the same attr_ name) - and then using CSS sibling relationship to 'connect' it to the <tr> sections that I want to have disappear. The end result of all this is as follows: The radio button set appears, I can select each of the three radio
options. The attr_boon-bane-or-bane value is correctly updating (as
seen on the Attributes & Abilities tab that Roll20 provides with a
character sheet. .All 18 buttons appear. (In other words, none of the three <tr> sections is getting the display : none; CSS setting. The only good news is that the buttons themselves work exactly as they're supposed to (so I've got that part right at least!) Any suggestions and help will be greatly appreciated.
