Help needed - hide a grid area based on an attribute value

Hi everybody, I would like my sheet to only reveal certain items on a page based on the profession they selected from a drop-down list. I've made multiple attempts to geyt around this without any luck. Here is the select list:  Profession <select name="attr_profession">                  <option value="1">Knight</option>                 <option value="2">Barbarian</option>                 <option value="3">Sorcerer</option>                 <option value="4">Mystic</option>                 <option value="5">Elementalist</option>                 <option value="6">Warlock</option>                 <option value="7">Assassin</option>                 <option value="8">Knave</option>                 <option value="9">Hunter</option>                 <option value="10">Priest</option>                 <option value="11">Demonologist</option>             </select> Here's the content:         <div class="magic">                          <div class="manabox">                 <div class="sorcerermana">                     <label>Sorcerer Magic Points</label>                     <label>Current <input type="number" name="attr_mp" value="" /> Max <input type="number" name="attr_maxmp" value="" /></label>                 </div>                                   <div class="warlockmana">                     <label>Warlock Magic Points</label>                     <label>Current <input type="number" name="attr_mp" value="" /> Max <input type="number" name="attr_maxmp" value="" /></label>                 </div>                                   <div class="demonologistmana">                     <label>Demonologist Magic Points</label>                     <label>Current <input type="number" name="attr_mp" value="" /> Max <input type="number" name="attr_maxmp" value="" /></label>                 </div>                                  <div class="elementalistmana">                     <label>Elemental Categories</label>                     <label>Primary Element                         <select name="attr_primaryelement">                              <option value="None"></option>                             <option value="Earth">Earth</option>                             <option value="Air">Air</option>                             <option value="Water">Water</option>                             <option value="Fire">Fire</option>                             <option value="Darkness">Darkness</option>                         </select>                                              </label>                     <label>                         Secondary Elements                             <select name="attr_secondaryelementone">                                  <option value="None"></option>                                 <option value="Earth">Earth</option>                                 <option value="Air">Air</option>                                 <option value="Water">Water</option>                                 <option value="Fire">Fire</option>                                 <option value="Darkness">Darkness</option>                             </select>                             <select name="attr_secondaryelementtwo">                                 <option value="None"></option>                                 <option value="Earth">Earth</option>                                 <option value="Air">Air</option>                                 <option value="Water">Water</option>                                 <option value="Fire">Fire</option>                                 <option value="Darkness">Darkness</option>                             </select>                         </label>                     <label>Elementalist Magic Points</label>                     <label>Primary Element Current <input type="number" name="attr_mainmp" value="" /> Max <input type="number" name="attr_mainmaxmp" value="" /></label>                     <label>Secondary Element Current <input type="number" name="attr_secondmp" value="" /> Max <input type="number" name="attr_secondmaxmp" value="" /></label>                     <label>Tertiary Element Current <input type="number" name="attr_thirdmp" value="" /> Max <input type="number" name="attr_thirdmaxmp" value="" /></label>                 </div>                                  <div class="mysticmana">                     <label>Mystic</label>                     <label>Psychic Fatigue Check</label>                     <label><input type="number" name="attr_psychicfatigue" value="@{rank}+13" disabled="true" /> minus spell level</label>                 </div>             </div>                          <div class="spells">                 <label>Spells of Rank 1</label>                 <fieldset class="repeating_SpellsRankOne">                      Name <input type="text" name="attr_SpellName" value="" />                     Range <input type="text" name="attr_SpellRange" value="" />                     Duration <input type="text" name="attr_SpellDuration" value="" /><p></p>                     Description<p></p> <textarea name="attr_SpellDescription"></textarea>                 </fieldset>                 <label>Spells of Rank 2</label>                 <fieldset class="repeating_SpellsRankTwo">                      Name <input type="text" name="attr_SpellName" value="" />                     Range <input type="text" name="attr_SpellRange" value="" />                     Duration <input type="text" name="attr_SpellDuration" value="" /><p></p>                     Description<p></p> <textarea name="attr_SpellDescription"></textarea>                 </fieldset>                 <label>Spells of Rank 3</label>                 <fieldset class="repeating_SpellsRankThree">                      Name <input type="text" name="attr_SpellName" value="" />                     Range <input type="text" name="attr_SpellRange" value="" />                     Duration <input type="text" name="attr_SpellDuration" value="" /><p></p>                     Description<p></p> <textarea name="attr_SpellDescription"></textarea>                 </fieldset>                 <label>Spells of Rank 4</label>                 <fieldset class="repeating_SpellsRankFour">                      Name <input type="text" name="attr_SpellName" value="" />                     Range <input type="text" name="attr_SpellRange" value="" />                     Duration <input type="text" name="attr_SpellDuration" value="" /><p></p>                     Description<p></p> <textarea name="attr_SpellDescription"></textarea>                 </fieldset>                 <label>Spells of Rank 5</label>                 <fieldset class="repeating_SpellsRankFive">                      Name <input type="text" name="attr_SpellName" value="" />                     Range <input type="text" name="attr_SpellRange" value="" />                     Duration <input type="text" name="attr_SpellDuration" value="" /><p></p>                     Description<p></p> <textarea name="attr_SpellDescription"></textarea>                 </fieldset>                 <label>Spells of Rank 6</label>                 <fieldset class="repeating_SpellsRankSix">                      Name <input type="text" name="attr_SpellName" value="" />                     Range <input type="text" name="attr_SpellRange" value="" />                     Duration <input type="text" name="attr_SpellDuration" value="" /><p></p>                     Description<p></p> <textarea name="attr_SpellDescription"></textarea>                 </fieldset>                 <label>Spells of Rank 7</label>                 <fieldset class="repeating_SpellsRankSeven">                      Name <input type="text" name="attr_SpellName" value="" />                     Range <input type="text" name="attr_SpellRange" value="" />                     Duration <input type="text" name="attr_SpellDuration" value="" /><p></p>                     Description<p></p> <textarea name="attr_SpellDescription"></textarea>                 </fieldset>                 <label>Spells of Rank 8</label>                 <fieldset class="repeating_SpellsRankEight">                      Name <input type="text" name="attr_SpellName" value="" />                     Range <input type="text" name="attr_SpellRange" value="" />                     Duration <input type="text" name="attr_SpellDuration" value="" /><p></p>                     Description<p></p> <textarea name="attr_SpellDescription"></textarea>                 </fieldset>                 <label>Spells of Rank 9</label>                 <fieldset class="repeating_SpellsRankNine">                      Name <input type="text" name="attr_SpellName" value="" />                     Range <input type="text" name="attr_SpellRange" value="" />                     Duration <input type="text" name="attr_SpellDuration" value="" /><p></p>                     Description<p></p> <textarea name="attr_SpellDescription"></textarea>                 </fieldset>                 <label>Spells of Rank 10</label>                 <fieldset class="repeating_SpellsRankTen">                      Name <input type="text" name="attr_SpellName" value="" />                     Range <input type="text" name="attr_SpellRange" value="" />                     Duration <input type="text" name="attr_SpellDuration" value="" /><p></p>                     Description<p></p> <textarea name="attr_SpellDescription"></textarea>                 </fieldset>             </div>         </div>          Here's  the CSS related to it: .sheet-magic { width: auto; height: auto; font-family: 'Almendra SC', serif; grid-template-columns: auto; grid-template-rows: auto; grid-template-areas: "manabox" "spells"; } .sheet-manabox {     grid-area: manabox;     font-family: 'Almendra SC', serif; border-style: double; border-width: 6px; } input.sheet-profession{value="1","2","4","5","6","7","8","9","10","11"] ~ div.sheet-sorcerermana {     display: none; } input.sheet-profession{value="1","2","3","5","6","7","8","9","10","11"] ~ div.sheet-mysticmana {     display: none; } input.sheet-profession{value="1","2","3","4","6","7","8","9","10","11"] ~ div.sheet-elementalistmana {     display: none; } input.sheet-profession{value="1","2","3","4","5","7","8","9","10","11"] ~ div.sheet-warlockmana {     display: none; } input.sheet-profession{value="1","2","3","4","5","6","7","8","9","10"] ~ div.sheet-demonologistmana {     display: none; } .sheet-spells { grid-area: spells; font-family: 'Almendra SC', serif; border-style: double; border-width: 6px; } I tried setting a sheet worker to use "(input.sheet-)professionx2 instead of "(input.sheet-)profession", instead of grabbing the value of profession directly, but this java script just breaks my sheet (and I don't know why):     on("change:profession sheet:opened", function() {         getAttrs(['profession'], function(value) {         let prof: (parseInt(value.profession) || 0)             setAttrs({                 "professionx2": prof         }):     }): }); I also thought that I might be able to make it work using a checkbox for each mana section, but couldn't get that to work for me either: input.sheet-toggle-showsorcerer:not(:checked) ~ div.sheet-sorcerermana {     display: none; } input.sheet-toggle-showmystic:not(:checked) ~ div.sheet-mysticmana {     display: none; } input.sheet-toggle-showelementalist:not(:checked) ~ div.sheet-elementalistmana {     display: none; } input.sheet-toggle-showwarlock:not(:checked) ~ div.sheet-warlockmana {     display: none; } input.sheet-toggle-showdemonologist:not(:checked) ~ div.sheet-demonologistmana {     display: none; } I can't work this out for myself. Please help!

There are a lot of syntax errors here. In your prof sheet worker, you have a : in place of an =, it should be on("change:profession sheet:opened", function() {         getAttrs(['profession'], function(value) {         let prof = (parseInt(value.profession) || 0)             setAttrs({                 "professionx2": prof         }):     }): }); But since you are just setting professionx2 to profession, it seems this is a completely unneccesary sheet worker and you can delete it. Regarding your select, you need to assign its value to a hidden input, and give that input a class, if you want to use it with the CSS. Something like:  Profession <select name="attr_profession">                  <option value="0" selected>(Pick One)</option>                 <option value="1">Knight</option>                 <option value="2">Barbarian</option>                 <option value="3">Sorcerer</option>                 <option value="4">Mystic</option>                 <option value="5">Elementalist</option>                 <option value="6">Warlock</option>                 <option value="7">Assassin</option>                 <option value="8">Knave</option>                 <option value="9">Hunter</option>                 <option value="10">Priest</option>                 <option value="11">Demonologist</option>             </select>     <input type="hidden" class="profession-toggle" name="attr_profession" value="0" /> When using a select whose value is going to be used with CSS, its always a good idea to set a default value with selected . Note that the hidden input might need to be moved - it doesnt have to be next to the select, but it does need to next to the html its going to affect, and at the same tier level. It looks like that should be immediately under the <div class="manabox"> line. This is VERY important . You need that hidden input placed exactly where it's needed. Personally I wouldnt use numbers for the values, I'd use lower case names (value="assassin", for example). But that's a personal preference. On to the CSS. You have a bunch of lines like this: input.sheet-profession{value="1","2","4","5","6","7","8","9","10","11"] ~ div.sheet-sorcerermana { The first problem here is you have mismatched brackets - you start with { and end with ]. That's never going to work. The second is you cant include multiple values like that. You are trying to hide the values if the value matches. What you should di, is hide always, then display  the value when there's a match. Then you only need to check for one value. add a mana class to each mana div, like this: <div class="manabox">                 <div class="mana sorcerermana">                     <label>Sorcerer Magic Points</label>                     <label>Current <input type="number" name="attr_mp" value="" /> Max <input type="number" name="attr_maxmp" value="" /></label>                 </div>                                   <div class="mana warlockmana">                     <label>Warlock Magic Points</label>                     <label>Current <input type="number" name="attr_mp" value="" /> Max <input type="number" name="attr_maxmp" value="" /></label>                 </div> Then you can hide them all with a single class, and then display the one that is revelant: div.sheet-mana {     display: none; } input.sheet-profession-toggle[value="3"] ~ div.sheet-sorcerermana, input.sheet-profession-toggle[value="4"] ~ div.sheet-mysticmana, input.sheet-profession-toggle[value="5"] ~ div.sheet-elementalistmana, input.sheet-profession-toggle[value="6"] ~ div.sheet-warlockmana { input.sheet-profession-toggle[value="11"] ~ div.sheet-demonologistmana {     display: block; } Hope this helps!

If you also want to hide spells, you need to make a second copy of the hidden profession-toggle input and put that just before the spells div. And add the spell-owning classes to the profession-toggle CSS list.

GiGs to the rescue yet again. Maybe you should get paid for this? Ever consider becoming a code teacher? I had been through so many different iterations of code, trying a whole bunch of stuff, so I'm not surprised I ended up with syntax errors and mismatched brackets - we all really need a second set of eyes (thanks for being mine again). I had tried to use a hidden value as you suggested, but did not have it in the right place which would not have occurred to me to check. The sheet worker to set the variable was a desperate reach when that wouldn't work for me. The values of the select list were strings, but I converted them to integers to use the unnecessary sheet worker, again a desperate measure. Your code works perfectly, I should probably just put you as the official Sheet Author at this stage.

MedievalSteve said: Your code works perfectly, I should probably just put you as the official Sheet Author at this stage. Lol, I'm glad it works :)