Double Conditional Hiding

I am not hopeful on this, after having read: <a href="https://app.roll20.net/forum/post/6721978/slug%7D" rel="nofollow">https://app.roll20.net/forum/post/6721978/slug%7D</a> However, I wonder if a working solution has ever been found? Right now, I have parts of a page that are hidden when a box is checked or you are on a different tab. That is a single condition for hiding something and it works well. What I am wondering is if there is a way to use two conditions. The goal is this: You have a list of abilities. It is long and not a repeatable because we do not want people adding to it. Rather than have it in the way all the time, it may be hidden. However, what if you want to un-hide the overall list but not see anything you are unranked in? This would make for two conditions. 1# the hide/un checkbox being unchecked, which is easy. #2 the value of a skill being &gt;0. I tried some things with range and a hidden input set to the value of the attr_, but it did not seem to make any difference. The min/max in the hidden input did not lock the number input, so I could get an out of range value in the CSS, which was what I tried using as part of triggering the CSS change from display: inline; to none. This did not work. I saw this: <a href="https://app.roll20.net/forum/post/5580043/hide-slash-show-divs-based-on-number-field" rel="nofollow">https://app.roll20.net/forum/post/5580043/hide-slash-show-divs-based-on-number-field</a> However, this would make me make a show/hide value for each ability in the list and then use sheetworker to link it to the value, which I would like to avoid. I would much prefer reusing the value and trigger on 0 or not(0). Still, it could solve what is failing in the other post I found. It just seems like a load of extra attr_ for making things a little nicer looking.

Should be possible. Do you have #1(hide/show toggle) working already and you just need to add #2? Can you post a small sample of your code? ie maybe just 3 abilities, your hide/show input/checkbox and any directly related css.

The sheet started with this: &lt;!--Abilities--&gt; &lt;div&gt; &lt;input type="checkbox" class="sheet-word" name="attr_abil_hide" value="1"/&gt;&lt;span&gt; &lt;h1 style="text-align: center"&gt;Abilities&lt;/h1&gt; &lt;/span&gt; &lt;span&gt;Hide Abilities:&lt;/span&gt;&lt;input type="checkbox" class="sheet-hidden sheet-block_switch" name="attr_abil_hide" value="1"/&gt; &lt;div class="sheet-block_a"&gt; &lt;div class="sheet-3colrow"&gt; &lt;div class="sheet-col"&gt; &lt;div class="sheet-row"&gt;&lt;div class="sheet-item sheet-120"&gt;&lt;input type="radio" class="sheet-attribute" name="attr_skill_select" value="@{0g_combat}"/&gt;&lt;span class="sheet-attribute"&gt;S:0G&amp;nbsp;Combat&lt;/span&gt;&lt;/div&gt;&lt;div class="sheet-item sheet-50"&gt;&lt;input type="number" name="attr_0g_combat" value="0"/&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="sheet-row"&gt;&lt;div class="sheet-item sheet-120"&gt;&lt;input type="radio" class="sheet-attribute" name="attr_skill_select" value="@{academics}"/&gt;&lt;span class="sheet-attribute"&gt;K:Academics&lt;/span&gt;&lt;/div&gt;&lt;div class="sheet-item sheet-50"&gt;&lt;input type="number" name="attr_academics" value="0"/&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="sheet-row"&gt;&lt;div class="sheet-item sheet-120"&gt;&lt;input type="radio" class="sheet-attribute" name="attr_skill_select" value="@{accounting}"/&gt;&lt;span class="sheet-attribute"&gt;K:Accounting&lt;/span&gt;&lt;/div&gt;&lt;div class="sheet-item sheet-50"&gt;&lt;input type="number" name="attr_accounting" value="0"/&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; And the backing CSS of this: .sheet-block_switch,.sheet-hidden { display:none; background:transparent; border:none; box-shadow:none; } div.sheet-block_a { display: inline; } div.sheet-block_b { display: none; } input.sheet-block_switch:checked ~ div.sheet-block_a { display: none; } input.sheet-block_switch:checked ~ div.sheet-block_b { display: inline; } All of that worked fine. Then I looked into ways to add the second condition so that if the above&nbsp;attr_0g_combat had a value but&nbsp;attr_academics did not, the&nbsp;attr_academics would drop from the list. Ti tried a few ways with no results. The last of which had: &lt;div class="sheet-block_a"&gt; &lt;span&gt;Hide Unranked Abilities:&lt;/span&gt;&lt;input type="checkbox" class="sheet-abil_switch" name="attr_unabil_hide" value="0"/&gt; &lt;div class="sheet-3colrow"&gt; &lt;div class="sheet-col"&gt; &lt;input type="hidden" class="sheet-this_abil" min="1" max="20" name="attr_0g_combat" /&gt; &lt;div class="sheet-hidden sheet-block_abil"&gt; &lt;div class="sheet-row"&gt;&lt;div class="sheet-item sheet-120"&gt;&lt;input type="radio" class="sheet-attribute" name="attr_skill_select" value="@{0g_combat}"/&gt;&lt;span class="sheet-attribute"&gt;S:0G&amp;nbsp;Combat&lt;/span&gt;&lt;/div&gt;&lt;div class="sheet-item sheet-50"&gt;&lt;input type="number" name="attr_0g_combat" value="0"/&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; &lt;input type="hidden" class="sheet-this_abil" min="1" max="20" name="attr_academics" /&gt; &lt;div class="sheet-hidden sheet-block_abil"&gt; &lt;div class="sheet-row"&gt;&lt;div class="sheet-item sheet-120"&gt;&lt;input type="radio" class="sheet-attribute" name="attr_skill_select" value="@{academics}"/&gt;&lt;span class="sheet-attribute"&gt;K:Academics&lt;/span&gt;&lt;/div&gt;&lt;div class="sheet-item sheet-50"&gt;&lt;input type="number" name="attr_academics" value="0"/&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; And: div.sheet-block_abil { display: inline; } input.sheet-abil_switch:checked ~ input.sheet-this_abil:out-of-range ~ div.sheet-block_abil { display: none; } None of the aays I tried made a difference. I tried the hidden imput as checked, had it as just the gidden and not some new CSS, and a few other things. in range, out of range, not(checked). Just hit a wall there as it is something I normally do server side about what lands in the page rather than filter out of a page with css.

Just reading the first post, it sounds you are asking: To have one conditional that sets whether the div is visible or not A second condition which sets whether all unranked skills are visible or hidden when the overall div is visible If I'm understanding this situation correctly, yes this is possible - and really, not very hard which is why I'm wondering if I am misunderstanding what you want.

I'm not going to attempt to write your actual code, because it looks complicated, so I'll describe instead in rough terms what you need. For the HTML: &lt;input type="checkbox" name="attr_full_div" class="sheet-toggle-div"&gt; &lt;div class="sheet-show-or-hide"&gt; &lt;input type="hidden" class="sheet-rank-toggle" name="attr_this_skill_rank" value="1"&gt; &lt;div class="sheet-show-or-hide"&gt;&lt;span&gt;A Skill&lt;/span&gt;&lt;input type="number" name="attr_this_skill_rank" value="0"&gt;&lt;/div&gt; &lt;!-- include as many skills as you want, each with a hidden input before it, and the hidden input and div containing the skill should have a class named exactly the same --&gt; &lt;/div&gt; Now for the CSS .sheet-toggle-div:not(:checked) + .sheet-show-or-hide, .sheet-rank-toggle[value="0"] + .sheet-show-or-hide { display: none; } This does present a problem. Skill rows are hidden when rank is zero, but if rank starts at 0, all skills will be hidden and there's no way to enter a rank. (This is why I set default rank to 1, so you can see they are actually visible until rank is set to 0).

GiGs said: This does present a problem. Skill rows are hidden when rank is zero, but if rank starts at 0, all skills will be hidden and there's no way to enter a rank. (This is why I set default rank to 1, so you can see they are actually visible until rank is set to 0). Whichis where the two conditions came in. A checkbox for oveall hide/inine already works. What I am talking about is adding a second checkbox where when that is checked AND the rank is 0, things disappear. That lets people uncheck that box to rank things and check it to have a short list. It is also what I meant by havint two conditional statements in the CSS. Still going through things on the site linked in my last question, but I wanted to see if I can get this done before the weekend.

Used this: &lt;span&gt;Hide Abilities:&lt;/span&gt;&lt;input type="checkbox" class="sheet-hidden sheet-block_switch" name="attr_abil_hide" value="1"/&gt; &lt;div class="sheet-block_a"&gt; &lt;span&gt;Hide Unranked Abilities:&lt;/span&gt;&lt;input type="checkbox" class="sheet-abil_switch" name="attr_unabil_hide" value="0"/&gt; &lt;div class="sheet-3colrow"&gt; &lt;div class="sheet-col"&gt; &lt;input type="hidden" class="sheet-this_abil" name="attr_0g_combat" /&gt; &lt;div class="sheet-block_abil"&gt; &lt;div class="sheet-row"&gt;&lt;div class="sheet-item sheet-120"&gt;&lt;input type="radio" class="sheet-attribute" name="attr_skill_select" value="@{0g_combat}"/&gt;&lt;span class="sheet-attribute"&gt;S:0G&amp;nbsp;Combat&lt;/span&gt;&lt;/div&gt;&lt;div class="sheet-item sheet-50"&gt;&lt;input type="number" name="attr_0g_combat" value="0"/&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; &lt;input type="hidden" class="sheet-this_abil" name="attr_academics" /&gt; &lt;div class="sheet-block_abil"&gt; &lt;div class="sheet-row"&gt;&lt;div class="sheet-item sheet-120"&gt;&lt;input type="radio" class="sheet-attribute" name="attr_skill_select" value="@{academics}"/&gt;&lt;span class="sheet-attribute"&gt;K:Academics&lt;/span&gt;&lt;/div&gt;&lt;div class="sheet-item sheet-50"&gt;&lt;input type="number" name="attr_academics" value="0"/&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; And this change to the CSS part: div.sheet-block_abil { display: inline; } .sheet-abil_switch:checked + .sheet-block_abil, .sheet-this_abil[value="0"] + .sheet-block_abil { display: none; } And several variations. I can get any single condition to work. I can get the&nbsp;attr_abil_hide checbox to hide/reveal the entire section, which worked before this too. I can get a checkbox to hide/reveale a single line in the table. I can get a single line in the table to disappear if its value is 0&nbsp; via div or span . What I can not still get to work is when&nbsp;attr_unabil_hide=1 and&nbsp;sheet-this_abil's linked attr_whatever=0 have that line disappear. Whenever there are two conditional statements, it seems to fail.

Aha, I was missing something. If you want to do two conditions at the same time, you are best off (and it might be the only way) using a sheet worker which calculates a single value - 0 or 1, typically. CSS won't work with two conditions, but a sheet worker can easily make this calculation. I'm not clear about something here: if the while section is visible, are all skills at rank 0 also meant to be visible? It looks like you have three states in mind: The whole block is made invisible The whole block is visible, except skills at rank 0 are hidden The whole block is visible, but skills at rank 0 are visible (so all skills are shown) Is that what you are wanting, or some other approach?

GiGs, In the end, yes, three states in that respect. Honestly, it is 5 states because because they are on different "tabs" and there are race/class changes that make parts of tabs appear or disappear. It is sWoD so race vs class is somewhat hazy. All of that was working up to 3 states. But these are nested states where one wraps around the next. I was trying to add the dual trigger thing where both triggers existed at the same time rather than at seperate nesting levels, which my recearch said needed a new sheetworker and an added variable for each skill. If that ends up being it, it is a ton for something that is just to make the list smaller for play.&nbsp;

If you can describe all the conditions, I can show you how to set them up. (Not tonight though, I'm going to bed soon.) Your research was correct: you do need a sheet worker. You will also need an extra, unique input for each skill (type="hidden"): it can be a lot of tedious gruntwork to set something like this up.

regex, sed, awk... It is simple enough to do. Just not sure if it is worth it. I'll ask the group if they really want that or not.

Yes, you can do this. You will need to hide each skill individually for the first condition, rather than hiding the section containing the skills. For the second condition, you still want something like this (coding from my phone, so please forgive): input.skillHider:checked ~ div.skillContainer:has(input:not(value=["0"])) { display: initial;} Where the skillContainer class is for an individual skill.&nbsp;