CSS hider with Sheetworkers doesnt work

I'm making my own roleplaying game and for test games I want to implement the digital token. One of the species in my game (the enhanced humans) need to have a menu to choose which of the 6 characteristics to add points to. But having the menu appear only after choosing that species is getting complicated for me. So far I have an attribute to act as a switcher and I had read here that with CSS you can make it change the style according to a value but for my case it is not working and I'm a little frustrated with this. This is the HTML code:    <label for="char_species">                Especie:                <select id="attr_species" name="attr_species">                   <option value="0,0,0,0,0,0">Selecciona</option>                   <option value="0,1,0,2,0,0">Asajaf</option>                   <option value="0,0,1,0,2,0">Cudoonianos</option>                   <option value="2,0,1,0,0,0">Denduros</option>                   <option value="0,0,0,0,1,2">Floidianos</option>                   <option value="human_normal">Humanos</option>                   <option value="human_modified"> -Humanos Mejorados</option>                   <option value="0,2,0,0,0,1">Lagartianos</option>                   <option value="0,1,0,0,2,0">Luminianos</option>                   <option value="2,0,0,1,0,0">Munbatiános Primal</option>                   <option value="1,0,0,2,0,0"> -Munbatiános Albinos</option>                   <option value="0,0,2,0,1,0">Petronianos</option>                   <option value="0,0,0,2,1,0">Psicofungunianos</option>                   <option value="1,0,0,1,1,-2">Robot</option>                   <option value="0,0,0,2,1,-2"> -Droide</option>                   <option value="0,0,0,1,1,1"> -Artificial</option>                   <option value="0,3,0,0,0,0">Vulkari</option>                   <option value="1,0,2,0,0,0">Xerakith</option>                   <option value="0,0,2,0,0,1"> -Xerakith Líder del enjambre</option>                </select>             </label>             <div>                <input type="hidden" name="attr_hidecheck" class="hidechecker" value="0">                <div id="modified_options" class="hider">                   <label for="first_choice">                      First Choice:                      <select id="first_choice" name="first_choice">                         <option value="physical">Physical</option>                         <option value="accuracy">Accuracy</option>                         <option value="fortitude">Fortitude</option>                         <option value="intellect">Intellect</option>                         <option value="knowledge">Knowledge</option>                         <option value="social">Social</option>                      </select>                   </label>                   <label for="second_choice">                      Second Choice:                      <select id="second_choice" name="second_choice">                         <option value="accuracy">Accuracy</option>                         <option value="physical">Physical</option>                         <option value="fortitude">Fortitude</option>                         <option value="intellect">Intellect</option>                         <option value="knowledge">Knowledge</option>                         <option value="social">Social</option>                      </select>                   </label>                </div>             </div> The current CSS to manage this switch of styles by class:  .charsheet input.hider { display: none; } .charsheet input.hidechecker[value="1"] ~ input.hider { display: block; } And the Sheetworker behind:  // Listener principal para species y char_* on('change:attribute', (obj) => {   const attributeName = obj.get('name');   const characterId = obj.get('_characterid');   updateAttribute(characterId,'hidecheck', 0);   if (!characterId) {     return;    }   if (attributeName === 'species') {     const speciesValue = obj.get('current');     humanRnot = "not";     if (speciesValue === 'human_normal') {       humanRnot = "human";       assignMaxGenomeBonus(characterId); // Recalcular genoma y resultados     } else if (speciesValue === 'human_modified') {           updateAttribute(characterId,'hidecheck', 1);     } else {       const speciesValues = speciesValue.split(',').map(Number);       if (speciesValues.length !== 6 || speciesValues.some(isNaN)) {         return;       }       attributeMapping.forEach((attr, index) => {         const genomeAttr = `${attr}_genome`;         const baseAttr = `char_${attr}`;         const resultAttr = `${attr}_result`;         updateAttribute(characterId, genomeAttr, speciesValues[index]);         updateResult(characterId, baseAttr, genomeAttr, resultAttr);       });     }   } else if (attributeName.startsWith('char_') && humanRnot === "human") {     assignMaxGenomeBonus(characterId);   } }); Thank you all!!!!

There are a few issues here: Your sheetworker code is not valid sheetworker code. It is using the API Mods syntax and functions which are not available in sheetworkers (see the wiki for more information). Your css for .hider  is looking for input.hider , but that class is on a div. In general, I recommend not combining tag selectors (e.g. input ) and classes because it makes the css overly specific. There is actually an easier way to accomplish this that doesn't require sheetworkers (shown below) Change your html for the hidden section to this: <!-- Change the hide checker to be a checkbox with a checked value of the option that we want to display this section in. --> <!-- Because the checkbox shares the same name as the select, it will share the value --> <input type="checkbox" hidden name="attr_species" class="hidechecker" value="human_modified"> <div id="modified_options" class="hider"> <label for="first_choice"> First Choice: <select id="first_choice" name="first_choice"> <option value="physical">Physical</option> <option value="accuracy">Accuracy</option> <option value="fortitude">Fortitude</option> <option value="intellect">Intellect</option> <option value="knowledge">Knowledge</option> <option value="social">Social</option> </select> </label> <label for="second_choice"> Second Choice: <select id="second_choice" name="second_choice"> <option value="accuracy">Accuracy</option> <option value="physical">Physical</option> <option value="fortitude">Fortitude</option> <option value="intellect">Intellect</option> <option value="knowledge">Knowledge</option> <option value="social">Social</option> </select> </label> </div> And then your css changes to this: .charsheet .hidechecker:not(:checked) ~ .hider{ display: none !important; /* !important is usually something to avoid using, but in this case we want this styling to apply no matter what */ } /* I can't remember if this css is native to Roll20 or part of my usual css reset, but you may need to add it if the checkbox winds up displaying. */ .charsheet [hidden]{ display: none !important; /* same reason for using !important as above */ }

I'd question including labels there (but that might be a personal aesthetic decision), but those select names look like they are missing something. Shouldn't they be? <select id="first_choice" name="attr_first_choice"> <select id="second_choice" name="attr_second_choice">

Good catch GiGs! I completely missed the name issue. Too focused on the hide issue to notice the problem in the code that was being conditionally displayed.