Hidden DIVs by Tier number

I make alternative Scion 2E sheet to that made by Salvador M. I expand it by some minor tweaks - but adding also a large modification of giving Antagonists stats on the sheet, as uncovered DIV in one place - and hidding other DIVs in other. Sheet already has option to hidden and show elements of it by making selection of Tier attribute. But I still do not understand HOW this element is hidden on Tier 0 and shown on Tier 1, expanded on Tier 2 and Tier 3. Here is example on the Legend Trait on this sheet... <input class="sheet-hider" type="hidden" name="attr_show_settings" value="0"> <div class="sheet-settings"> <span>Tier:</span> <select name="attr_tier"> <option value="0" selected>Mortal</option> <option value="1">Hero</option> <option value="2">Demigod</option> <option value="3">God</option> <option value="4">Antagonist</option> </select> </div> <input type="hidden" name="attr_tier" class="tierhider" value="0"> <input type="hidden" name="attr_targetnumber" value="8"> <div class="2colrow"> <div class="col"> <div class="flex-container"><label class="input-label"><h4>Name:</h4></label> <input type="text" name="attr_character_name"/></div> <div class="flex-container"><label class="input-label"><h4>Player:</h4></label> <input type="text" name="attr_player"/></div> <div class="flex-container vertical center vertical-encroach tier1"> <h4>Legend</h4> <span> <input class="normal" type="radio" name="attr_legend" value="1" checked /><span></span> <input class="normal" type="radio" name="attr_legend" value="2" /><span></span> <input class="normal" type="radio" name="attr_legend" value="3" /><span></span> <input class="normal" type="radio" name="attr_legend" value="4" /><span></span> <input class="normal tier2" type="radio" name="attr_legend" value="5" /><span class="tier2"></span> <input class="normal tier2" type="radio" name="attr_legend" value="6" /><span class="tier2"></span> <input class="normal tier2" type="radio" name="attr_legend" value="7" /><span class="tier2"></span> <input class="normal tier2" type="radio" name="attr_legend" value="8" /><span class="tier2"></span> <input class="normal tier3" type="radio" name="attr_legend" value="9" /><span class="tier3"></span> <input class="normal tier3" type="radio" name="attr_legend" value="10" /><span class="tier3"></span> <input class="normal tier3" type="radio" name="attr_legend" value="11" /><span class="tier3"></span> <input class="normal tier3" type="radio" name="attr_legend" value="12" /><span class="tier3"></span> </span> <span> <input class="normal" type="checkbox" name="attr_legendpoints1" value="1"/><span></span> <input class="normal" type="checkbox" name="attr_legendpoints2" value="1"/><span></span> <input class="normal" type="checkbox" name="attr_legendpoints3" value="1"/><span></span> <input class="normal" type="checkbox" name="attr_legendpoints4" value="1"/><span></span> <input class="normal tier2" type="checkbox" name="attr_legendpoints5" value="1"/><span class="tier2"></span> <input class="normal tier2" type="checkbox" name="attr_legendpoints6" value="1"/><span class="tier2"></span> <input class="normal tier2" type="checkbox" name="attr_legendpoints7" value="1"/><span class="tier2"></span> <input class="normal tier2" type="checkbox" name="attr_legendpoints8" value="1"/><span class="tier2"></span> <input class="normal tier3" type="checkbox" name="attr_legendpoints9" value="1"/><span class="tier3"></span> <input class="normal tier3" type="checkbox" name="attr_legendpoints10" value="1"/><span class="tier3"></span> <input class="normal tier3" type="checkbox" name="attr_legendpoints11" value="1"/><span class="tier3"></span> <input class="normal tier3" type="checkbox" name="attr_legendpoints12" value="1"/><span class="tier3"></span> </span> </div> </div>

In the CSS, you are making all sections hidden and then making it visible when an attribute's value equals the correct value.  So for example, for the sheet-settings you'd have something like  .sheet-settings {display: none;} followed by a piece of css that reads the value of your sheet-hider input, we're assuming this is a checkbox that reads 0 or 1. The "+" css selector targets a div with the .sheet-settings class on it that is placed immediately after the input.  input.sheet-hider[value="1"] + .sheet-settings {display: block;} Depending on your application you might switch out the css selector to "~" instead of "+" if its not immediately placed after. The "~" selector can select any siblings that come after the input, including ones not immediately after, for example if you need to tab between two more sheets, which probably means using a string to detect different options.  input.sheet-hider[value="protagonist"] ~ div.sheet-protagonist {display: block;} input.sheet-hider[value="antagonist"] ~ div.sheet-antagonist {display: block;}

Okay, so, here is how CSS files starts on sheet-hider... .sheet-hider[value="0"]+li, .sheet-hider[value="0"]+div, .sheet-hider[value="0"]+label, .sheet-hider[value="-1"]+li, .sheet-hider[value="-1"]+div, .sheet-hider[value="-1"]+label { display: none } .sheet-tierhider[value="0"] ~ .sheet-tier1, .sheet-tierhider[value="0"] ~ .sheet-tier2, .sheet-tierhider[value="0"] ~ .sheet-tier3, .sheet-tierhider[value="1"] ~ .sheet-tier2, .sheet-tierhider[value="1"] ~ .sheet-tier3, .sheet-tierhider[value="2"] ~ .sheet-tier3, .sheet-tierhider[value="0"] ~ * .sheet-tier1, .sheet-tierhider[value="0"] ~ * .sheet-tier2, .sheet-tierhider[value="0"] ~ * .sheet-tier3, .sheet-tierhider[value="1"] ~ * .sheet-tier2, .sheet-tierhider[value="1"] ~ * .sheet-tier3, .sheet-tierhider[value="2"] ~ * .sheet-tier3, .sheet-tierhider:not([value="0"]) ~ .sheet-tier0, .sheet-tierhider:not([value="0"]) ~ * .sheet-tier0 { display: none; } As I'm marking the section that should disappear as tier4 ( to stick with sheets terminology for now ), with declarations like those: <!--Antagonists stats --> <div class="tier4"> <div class="row"> <h2>Archetype:</h2> / To Be Continued All I do need to add in CSS in hiders section is this? .sheet-tierhider[value="0"] ~ .sheet-tier4, .sheet-tierhider[value="1"] ~ .sheet-tier4, .sheet-tierhider[value="2"] ~ .sheet-tier4, I understand it correctly?

Make sure you are changing the display to something besides "none" at some point in the css. I'm still a little unclear of what you are trying to do. My guess is there are up to four tiers, you want to hide all of them and only show a tier selected via select option?  You can try something like div[class*="tier"] {display: none;} The "*=" class selector searches your classes and sees if "tier" shows up in them, so you can hit multiple classes with the same generic style.  And then continue with showing your sections with .sheet-tierhider[value="1"] ~ .sheet-tier1, .sheet-tierhider[value="2"] ~ .sheet-tier2, .sheet-tierhider[value="3"] ~ .sheet-tier3, .sheet-tierhider[value="4"] ~ .sheet-tier4 {display: block;}

I will then show what I want to get from this sheet... It has Tier attribute that 'turn on/off' elements of sheet - I assume it works as sheet worker functions also, but I'm not sure. New open sheet... Choosing 'Tier' of character... Showing Legend element on higher Tier... Legend trait still shown on the Antagonist Tier, where I want to remove it... Text Worker scripts of original sheet... <script type="text/worker"> on("sheet:opened", function(){ getSectionIDs("health", function(idarray){ if (idarray.length < 1){ var values = {}; var levels = ["+1", "+2", "+4", "0"]; for (var i = 0; i < levels.length; i++){ var rowID = generateRowID(); values["repeating_health_" + rowID + "_healthlevel"] = levels[i]; } setAttrs(values); } }); }); on("change:tier", function(eventInfo){ switch(eventInfo.newValue){ case 0: case 1: default: setAttrs({targetnumber: 8}); break; case 2: case 3: setAttrs({targetnumber: 7}); break; } }); on("change:calling1 change:calling1_duplicate", function(eventInfo){ var values = {}; switch(eventInfo.sourceAttribute){ case "calling1": values.calling1_duplicate = eventInfo.newValue; break; case "calling1_duplicate": values.calling1 = eventInfo.newValue; break; } setAttrs(values); }); </script>