hide/show are based on attribute value

I wanted to put rows of checkboxes on my character sheet to represent how much fatigue a character has. The number of boxes in each row depends on the character's vitality score. Is there a way to hide items based on the value of an attribute?

Yes it is possible, the basic principle is here:&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas</a> However, in the CSS rule which checks attributes you can only check for exact values (e.g. attribute = 17), not greater than or less than (attribute &gt; 17). This complicates projects like yours, where for instance, if you have a vitality of 5, you want to hide the boxes for all vitalities above 5 (or, stated in another way, you want to show the boxes for all of 5 or less). The best way, I think, to handle this is to have&nbsp; hidden input for every single fatigue box, and use a sheet worker to set its value to 0 or 1 (0 if vitality is below that box's vitality, and 1 if its euqal or greater). Then your css can just check if that box is 1, and show it if so. So lets say your vitality can range from 1 to 10, so you have 10 boxes with classes named vitality-1, vitality-2, vitality-2, etc each of those boxes is preceded with a hidden input, with name and class set to vitality_show_1, vitality_show_2, etc. You have css rules that hide vitality-1, and show if v_show_1 is . Then you have a sheet worker that reads vitality, and changes the value of v_show_1, v_show_2, etc to 1 or 0 as needed.

If you nest to the right, you can do the hide with just CSS, I believe.&nbsp; So the box for 15 contains the checkbox for 15 and the box for 16, which itself includes the checkbox for 16 and the box for 17, and so on.

Can you post a sample of code for that Aaron? Just say for boxes 1, 2, and 3.

I'm not that good with CSS that I can just whip it out. =D&nbsp; I'm just thinking as far as constraints to the system. If the issue is that you can't compare to less than or greater than, only equals, then it stands to reason that if your "hiding" box contains from X and higher, then the X+1 and higher boxes will get hidden by the X being hidden, though they themselves are in the shown state.

So each character has a vitality score from 1 to 5. Fatigue is displayed with 5 rows. Each row has a number of boxes equal to 1+Vitality. When the last box in a row is checked off, a modifier is incurred. I thought it should be possible to use the "fill bubbles from left" bit of wizardry, but only show the second button in each row if the Vitality score is 2 or more, and hide the third button in each row unless the score is 3 or more, etc. I thought there must be some way to use a feature similar to the assigning multiple classes (i.e. gt-1, gt-2, etc.) to the fill buttons in that bit of wizardry. So the third button might have class="vitality_show_2 vitality_show_3" and the fourth button class="vitality_show_2 vitality_show_3 vitality_show_4", etc., but my grasp of this is very limited, and I'm not sure how to make that work, or if it is even possible.&nbsp;&nbsp;

I figured out part of this. With a sheet worker, I can set the value of inputs, but I am not getting the css part right somehow. I have this code: &lt;input type="number" name="attr_vitality"/&gt; &lt;input type="number" name="attr_vitality2" readonly/&gt; &lt;div class="vitality2_show"&gt; &nbsp; &nbsp; &lt;input type="checkbox"/&gt; &lt;/div&gt; &lt;input type="number" name="attr_vitality3" readonly/&gt; &lt;div class="vitality3_show"&gt; &nbsp; &nbsp; &lt;input type="checkbox"/&gt; &lt;/div&gt; &lt;input type="number" name="attr_vitality4" readonly/&gt; &lt;div class="vitality3_show"&gt; &nbsp; &nbsp; &lt;input type="checkbox"/&gt; &lt;/div&gt; &lt;input type="number" name="attr_vitality5" readonly/&gt; &lt;div class="vitality3_show"&gt; &nbsp; &nbsp; &lt;input type="checkbox"/&gt; &lt;/div&gt; &lt;script type="text/worker"&gt; &nbsp; &nbsp; on("sheet:opened change:vitality", function() { &nbsp; &nbsp; &nbsp; &nbsp; getAttrs(["vitality"], function(values) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var vit= parseInt(values["vitality"]) || 0 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(vit&gt;1){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "vitality2":1 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "vitality2":0 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(vit&gt;2){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "vitality3":1 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "vitality3":0 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(vit&gt;3){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "vitality4":1 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "vitality4":0 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(vit&gt;4){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "vitality5":1 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "vitality5":0 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; });&nbsp; &lt;/script&gt; (which I'm sure could be done more elegantly if there is a case statement available) and this css: .sheet-vitality2_show, .sheet-vitality3_show, .sheet-vitality4_show, .sheet-vitality5_show{ &nbsp; &nbsp; display:none; } .sheet-vitality2[value="1"] ~ div.sheet-vitality2_show, .sheet-vitality3[value="1"] ~ div.sheet-vitality3_show, .sheet-vitality4[value="1"] ~ div.sheet-vitality4_show, .sheet-vitality5[value="1"] ~ div.sheet-vitality5_show { display: block; } What am I doing wrong here?

your inputs need class names. CSS cant see the attribute names, only the classes and values. So you ned the attribute name for the sheet worker to set the values, then class names for the CSS to notice them. So this would be &lt;input type="number" name="attr_vitality"/&gt; &lt;input type="number" class="vitality2" name="attr_vitality2" readonly/&gt; &lt;div class="vitality2_show"&gt; &nbsp; &nbsp; &lt;input type="checkbox"/&gt; &lt;/div&gt; &lt;input type="number" class="vitality3" name="attr_vitality3" readonly/&gt; &lt;div class="vitality3_show"&gt; &nbsp; &nbsp; &lt;input type="checkbox"/&gt; &lt;/div&gt; &lt;input type="number" class="vitality4" name="attr_vitality4" readonly/&gt; &lt;div class="vitality3_show"&gt; &nbsp; &nbsp; &lt;input type="checkbox"/&gt; &lt;/div&gt; &lt;input type="number" class="vitality5" name="attr_vitality5" readonly/&gt; &lt;div class="vitality5_show"&gt; &nbsp; &nbsp; &lt;input type="checkbox" /&gt; &lt;/div&gt; Also unless you are using those divs for some other styling not shown here, you dont need to nest the inputs unside a div. You could so &lt;input type="number" class="vitality2" name="attr_vitality2" readonly/&gt; &lt;input type="checkbox" name="attr_whatever" value="1"/&gt; and then change the CSS to target inputs not divs, like .sheet-vitality2[value="1"] ~ input.sheet-vitality2_show, or to be even more specific input[type="number"].sheet-vitality2[value="1"] ~ iput[type="checkbox"].sheet-vitality2_show, Finally all inputs need a name, that includes checkboxes. Your checkboxes will lose their value when you close and reopen the sheet, if you dont give them a name. It's usually a good idea to give checkboxes a value (="1" is usually good).

The Aaron said: I'm not that good with CSS that I can just whip it out. =D&nbsp; I'm just thinking as far as constraints to the system. If the issue is that you can't compare to less than or greater than, only equals, then it stands to reason that if your "hiding" box contains from X and higher, then the X+1 and higher boxes will get hidden by the X being hidden, though they themselves are in the shown state. I was going to bed when I asked that, and I realised what you meant as I was shutting the PC down. I'll have to try that - but for long check sequences, the amount of nesting there would give me the heebie-jeebies.

I had a similar issue on the Forbidden Lands sheet.&nbsp; As Aaron mentioned, I think you can use nth-of-type to style/hide the elements after the last checked input.&nbsp; <a href="https://app.roll20.net/forum/permalink/8174554/" rel="nofollow">https://app.roll20.net/forum/permalink/8174554/</a>

The correct CSS (and thus, jQuery) selector for that is [attribute=value], so, to select items with data-policy="0" you should use [data-policy=0]. facetime for pc

Toledo R. said: The correct CSS (and thus, jQuery) selector for that is [attribute=value], so, to select items with data-policy="0" you should use [data-policy=0]. Hi Toledo, Not sure if this would apply since roll20 does not allow sheetworker js to affect the dom. ;-(

Toledo R. said: The correct CSS (and thus, jQuery) selector for that is [attribute=value], so, to select items with data-policy="0" you should use [data-policy=0]. I'm not sure what point you're making here. What works on other sites isnt necessarily good advice for roll20. JQuery doesnt work here, for example.

I think this is what The Aaron is talking about... On the Official Savage Worlds Sheet one can have more than one Arcane Background (think schools of types of magic), and each type can have it's own name, number of power points, etc. I wanted to allow people to configure the power section to allow that sort of thing, but additionally, they need to be able to indicate which power goes with with which Arcane Background (AB). Here's the code and CSS for configuring which AB is assigned to which power. HTML: &lt;fieldset class='repeating_spells'&gt; &lt;div class='sheet-fullrow'&gt; &lt;div class="sheet-spellconfig"&gt; &lt;div class="sheet-showabindicatorselection"&gt; &lt;label class="sheet-powerconfiglabel sheet-label1"&gt;Arcane Background Indicator: &lt;input type="hidden" name="attr_rptablabel" value="AB 1" /&gt; &lt;input type="hidden" name="attr_rptab1color" value="white" /&gt; &lt;input type="hidden" name="attr_rptablabel2" value="AB 2" /&gt; &lt;input type="hidden" name="attr_rptab2color" value="red" /&gt; &lt;input type="hidden" name="attr_rptablabel3" value="AB 3" /&gt; &lt;input type="hidden" name="attr_rptab3color" value="blue" /&gt; &lt;input type="hidden" name="attr_rptablabel4" value="AB 4" /&gt; &lt;input type="hidden" name="attr_rptab4color" value="green" /&gt; &lt;input type="hidden" name="attr_rptablabel5" value="AB 5" /&gt; &lt;input type="hidden" name="attr_rptab5color" value="purple" /&gt; &lt;div class="sheet-container"&gt; &lt;div class="sheet-child3"&gt; &lt;label class="sheet-abmenu sheet-ab1"&gt;&lt;input type="radio" class="sheet-select-radio sheet-ab1" name="attr_powergroup" value="ab1" checked="checked" /&gt;&lt;span class="sheet-powerdisplay" name="attr_rptablabel"&gt;&lt;/span&gt;&lt;/label&gt; &lt;label class="sheet-abmenu sheet-ab2"&gt;&lt;input type="radio" class="sheet-select-radio sheet-ab2" name="attr_powergroup" value="ab2" /&gt;&lt;span class="sheet-powerdisplay" name="attr_rptablabel2"&gt;&lt;/span&gt;&lt;/label&gt; &lt;label class="sheet-abmenu sheet-ab3"&gt;&lt;input type="radio" class="sheet-select-radio sheet-ab3" name="attr_powergroup" value="ab3" /&gt;&lt;span class="sheet-powerdisplay" name="attr_rptablabel3"&gt;&lt;/span&gt;&lt;/label&gt; &lt;label class="sheet-abmenu sheet-ab4"&gt;&lt;input type="radio" class="sheet-select-radio sheet-ab4" name="attr_powergroup" value="ab4" /&gt;&lt;span class="sheet-powerdisplay" name="attr_rptablabel4"&gt;&lt;/span&gt;&lt;/label&gt; &lt;label class="sheet-abmenu sheet-ab5"&gt;&lt;input type="radio" class="sheet-select-radio sheet-ab5" name="attr_powergroup" value="ab5" /&gt;&lt;span class="sheet-powerdisplay" name="attr_rptablabel5"&gt;&lt;/span&gt;&lt;/label&gt; &lt;input type="hidden" class="sheet-select-radio" name="attr_powergroup" value="ab1" /&gt; &lt;div class="sheet-ab1"&gt;&lt;span name="attr_rptablabel"&gt;&lt;/span&gt;&lt;/div&gt; &lt;div class="sheet-ab2"&gt;&lt;span name="attr_rptablabel2"&gt;&lt;/span&gt;&lt;/div&gt; &lt;div class="sheet-ab3"&gt;&lt;span name="attr_rptablabel3"&gt;&lt;/span&gt;&lt;/div&gt; &lt;div class="sheet-ab4"&gt;&lt;span name="attr_rptablabel4"&gt;&lt;/span&gt;&lt;/div&gt; &lt;div class="sheet-ab5"&gt;&lt;span name="attr_rptablabel5"&gt;&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; CSS: .sheet-child3:hover label.sheet-ab1, input:not([value="1"]).sheet-showmultipleabs ~ [data-groupname=repeating_spells] &gt; .repitem &gt; .sheet-fullrow &gt; .sheet-spellconfig &gt; .sheet-showabindicatorselection &gt; .sheet-powerconfiglabel &gt; .sheet-container &gt; .sheet-child3:hover label.sheet-ab2, input:not([value="1"]):not([value="2"]).sheet-showmultipleabs ~ [data-groupname=repeating_spells] &gt; .repitem &gt; .sheet-fullrow &gt; .sheet-spellconfig &gt; .sheet-showabindicatorselection &gt; .sheet-powerconfiglabel &gt; .sheet-container &gt; .sheet-child3:hover label.sheet-ab3 , input:not([value="1"]):not([value="2"]):not([value="3"]).sheet-showmultipleabs ~ [data-groupname=repeating_spells] &gt; .repitem &gt; .sheet-fullrow &gt; .sheet-spellconfig &gt; .sheet-showabindicatorselection &gt; .sheet-powerconfiglabel &gt; .sheet-container &gt; .sheet-child3:hover label.sheet-ab4, input:not([value="1"]):not([value="2"]):not([value="3"]):not([value="4"]).sheet-showmultipleabs ~ [data-groupname=repeating_spells] &gt; .repitem &gt; .sheet-fullrow &gt; .sheet-spellconfig &gt; .sheet-showabindicatorselection &gt; .sheet-powerconfiglabel &gt; .sheet-container &gt; .sheet-child3:hover label.sheet-ab5 { display: inline-block; margin-left: -5px; font-size: .93em; } And here's what it looks like on the sheet: The Arcane Background Indicator will display the available options, but only for the ABs configured. There's probably a more elegant way of accomplishing this, but...it works. NOTE : I may need to edit this if the code block doesn't give the horizontal scroll, because the above looks like a mess at the moment... EDIT : For some reason the CSS didn't give the horizontal scroll, but the HTML did... :-/ I went ahead and bolded every other line of the CSS to make reading it a little easier.

It now reads : &lt;input type="number" class="vitality2" name="attr_vitality2" readonly/&gt; &lt;input type="checkbox" name="attr_fat2" class="vitality2_show" value="1"/&gt; &lt;input type="number" class="vitality3" name="attr_vitality3" readonly/&gt; &lt;input type="checkbox" name="attr_fat3_show" class="vitality3_show" value="1"/&gt; &lt;input type="number" class="vitality4" name="attr_vitality4" readonly/&gt; &lt;input type="checkbox" name="attr_fat4_show" class="vitality4_show" value="1"/&gt; &lt;input type="number" class="vitality5" name="attr_vitality5" readonly/&gt; &lt;input type="checkbox" name="attr_fat5_show" class="vitality5_show" value="1"/&gt; with the CSS: input[type="checkbox"].sheet-vitality2_show, input[type="checkbox"].sheet-vitality3_show, input[type="checkbox"].sheet-vitality4_show, input[type="checkbox"].sheet-vitality5_show{ &nbsp; &nbsp; display:none; } input[type="number"].sheet-vitality2[value="1"] ~ input[type="checkbox"].sheet-vitality2_show, input[type="number"].sheet-vitality3[value="1"] ~ input[type="checkbox"].sheet-vitality3_show, input[type="number"].sheet-vitality4[value="1"] ~ input[type="checkbox"].sheet-vitality4_show, input[type="number"].sheet-vitality5[value="1"] ~ input[type="checkbox"].sheet-vitality5_show{ display: block; } But it still doesn't show the checkboxes when the appropriate input has a value of 1. I must be missing something obvious.

Try changing the number inputs (not the checkboxes, but the type="number" ones) to type="hidden". &lt;input type="hidden" class="vitality2" name="attr_vitality2" readonly/&gt; &lt;input type="checkbox" name="attr_fat2" class="vitality2_show" value="1"/&gt; &lt;input type="hidden" class="vitality3" name="attr_vitality3" readonly/&gt; &lt;input type="checkbox" name="attr_fat3_show" class="vitality3_show" value="1"/&gt; &lt;input type="hidden" class="vitality4" name="attr_vitality4" readonly/&gt; &lt;input type="checkbox" name="attr_fat4_show" class="vitality4_show" value="1"/&gt; &lt;input type="hidden" class="vitality5" name="attr_vitality5" readonly/&gt; &lt;input type="checkbox" name="attr_fat5_show" class="vitality5_show" value="1"/&gt; If you need to number to be visible, you can create a hidden copy wit the same name, like so&nbsp; &lt;input type="number" name="attr_vitality2" readonly/&gt; &lt;input type="hidden" class="vitality2" name="attr_vitality2" readonly/&gt; &lt;input type="checkbox" name="attr_fat2" class="vitality2_show" value="1"/&gt; Note that the hidden input is the one that needs the class, because that's the one being read by CSS. You'll also have to change the CSS, like so: input[type="checkbox"].sheet-vitality2_show, input[type="checkbox"].sheet-vitality3_show, input[type="checkbox"].sheet-vitality4_show, input[type="checkbox"].sheet-vitality5_show{ &nbsp; &nbsp; display:none; } input[type="hidden"].sheet-vitality2[value="1"] ~ input[type="checkbox"].sheet-vitality2_show, input[type="hidden"].sheet-vitality3[value="1"] ~ input[type="checkbox"].sheet-vitality3_show, input[type="hidden"].sheet-vitality4[value="1"] ~ input[type="checkbox"].sheet-vitality4_show, input[type="hidden"].sheet-vitality5[value="1"] ~ input[type="checkbox"].sheet-vitality5_show{ display: block; }

hidden inputs work slightly differently to other inputs. IIRC, CSS in roll20 only looks at the value specifically written in the html, and not the attribute's current value. But CSS will read the current value of hidden inputs. I think this is the reason type="hidden" inputs exist. This means in roll20, you often have to create hidden input copies of existing attribute, to get the CSS to work properly. I'm not a CSS expert - I don't remember seeing this documented anywhere, but it is my experience.

Once again you have saved my sanity. The inputs are supposed to be hidden. I just had them as number so I could make sure they worked. They change to the css did the trick. Thank you, again.

I put it all together, and it works beautifully, with one hitch. The first box in the second row shows checked whenever the first or second box in the first row&nbsp;is clicked. Nm - realized I had an error in code.

My sheet is finally coming together, thanks to GiGs helping me with all the complicated parts.

It's looking great :)

I seen your question. It was not working because the tag was not input, it was div. The updated answer will toggle any tag that has data-policy=0&nbsp; official site

I'm not familiar with data-policy. Are you suggesting it as an attribute name, or a html tag attribute? I dont think data-policy would work as a html tag attribute, on roll20. Remember we are working with a restricted set of html tags and attributes.

I think you may be conversing with a bot.&nbsp; No hours played, no games, and the only 2 posts are in this thread.

I did wonder if it was some kind of spambot, the font difference seems to be a common indicator for some weird reason, but the lack of an actual spam link is confusing.

GiGs said: I did wonder if it was some kind of spambot, the font difference seems to be a common indicator for some weird reason, but the lack of an actual spam link is confusing. Happens to the best of us. ;-P