Show/Hide elements with selectbox

Hello everyone, maybe someone can help me how I can implement the following in roll20. I want to display only as many " statusbox wounds_" as I have selected in the "attr_usable_wounds" selectbox above. The same of course for stress and mana. Many thanks for your help. <div class="float half status"> <div class="header"> <input class="options-flag" name="attr_options-flag-status" type="checkbox" title="Show/hide options" type="checkbox" /><span>y</span> <span>Status</span> </div> <input class="options-flag hidden" type="checkbox" name="attr_options-flag-status"> <div class="hiddenBox"> <input type="checkbox" id="statusstress" name="attr_status_stress"> <label for="statusstress">Stress</label> <input type="checkbox" id="statusmana" name="attr_status_mana"> <label for="statusmana">Mana</label> </div> <section class="repeat-wounds"> <input class="options-flag" name="attr_options-flag-wounds" type="checkbox" title="Show/hide options" type="checkbox" /><span>y</span> <div class="sheet-status-header"> Wunden <select class="hiddenBox" name="attr_usable_wounds"> <option value=1 selected>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <option value=6>6</option> <option value=7>7</option> <option value=8>8</option> <option value=9>9</option> <option value=10>10</option> </select> </div> <div class="sheet-status-row wounds"> <div class="statusbox wounds_1"> <input type="checkbox" value="None" id="attr_status_wounds_1" name="attr_status_wounds_1" /> <label for="attr_status_wounds_1" title="1"></label> <label class="value" for="attr_status_wounds_1" title="1">1</label> </div> <div class="statusbox wounds_2 "> <input type="checkbox" value="None" id="attr_status_wounds_2" name="attr_status_wounds_2" /> <label for="attr_status_wounds_2" title="2"></label> <label class="value" for="attr_status_wounds_2" title="2">2</label> </div> <div class="statusbox wounds_3 "> <input type="checkbox" value="None" id="attr_status_wounds_3" name="attr_status_wounds_3" /> <label for="attr_status_wounds_3" title="3"></label> <label class="value" for="attr_status_wounds_3" title="3">3</label> </div> <div class="statusbox wounds_4 "> <input type="checkbox" value="None" id="attr_status_wounds_4" name="attr_status_wounds_4" /> <label for="attr_status_wounds_4" title="4"></label> <label class="value" for="attr_status_wounds_4" title="4">4</label> </div> <div class="statusbox wounds_5 "> <input type="checkbox" value="None" id="attr_status_wounds_5" name="attr_status_wounds_5" /> <label for="attr_status_wounds_5" title="5"></label> <label class="value" for="attr_status_wounds_5" title="5">5</label> </div> <div class="statusbox wounds_6 "> <input type="checkbox" value="None" id="attr_status_wounds_6" name="attr_status_wounds_6" /> <label for="attr_status_wounds_6" title="6"></label> <label class="value" for="attr_status_wounds_6" title="6">6</label> </div> <div class="statusbox wounds_7 "> <input type="checkbox" value="None" id="attr_status_wounds_7" name="attr_status_wounds_7" /> <label for="attr_status_wounds_7" title="7"></label> <label class="value" for="attr_status_wounds_7" title="7">7</label> </div> <div class="statusbox wounds_8 "> <input type="checkbox" value="None" id="attr_status_wounds_8" name="attr_status_wounds_8" /> <label for="attr_status_wounds_8" title="8"></label> <label class="value" for="attr_status_wounds_8" title="8">8</label> </div> <div class="statusbox wounds_9 "> <input type="checkbox" value="None" id="attr_status_wounds_9" name="attr_status_wounds_9" /> <label for="attr_status_wounds_9" title="9"></label> <label class="value" for="attr_status_wounds_9" title="9">9</label> </div> <div class="statusbox wounds_10 "> <input type="checkbox" value="None" id="attr_status_wounds_10" name="attr_status_wounds_10" /> <label for="attr_status_wounds_10" title="10"></label> <label class="value" for="attr_status_wounds_10" title="10">10</label> </div> </div> </section> <input class="hidden" type="checkbox" id="checkbox-stress" name="attr_status_stress"> <section class="repeat-stress"> <input class="options-flag" name="attr_options-flag-stress" type="checkbox" title="Show/hide options" type="checkbox" /><span>y</span> <div class="sheet-status-header"> Stress <select class="hiddenBox" name="attr_usable_stress"> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <option value=6>6</option> <option value=7>7</option> <option value=8>8</option> <option value=9>9</option> <option value=10>10</option> </select> </div> <div class="sheet-status-row stress"> <div class="statusbox stress_1"> <input type="checkbox" value="None" id="attr_status_stress_1" name="attr_status_stress_1" /> <label for="attr_status_stress_1" title="1"></label> <label class="value" for="attr_status_stress_1" title="1">1</label> </div> <div class="statusbox stress_2 "> <input type="checkbox" value="None" id="attr_status_stress_2" name="attr_status_stress_2" /> <label for="attr_status_stress_2" title="2"></label> <label class="value" for="attr_status_stress_2" title="2">2</label> </div> <div class="statusbox stress_3 "> <input type="checkbox" value="None" id="attr_status_stress_3" name="attr_status_stress_3" /> <label for="attr_status_stress_3" title="3"></label> <label class="value" for="attr_status_stress_3" title="3">3</label> </div> <div class="statusbox stress_4 "> <input type="checkbox" value="None" id="attr_status_stress_4" name="attr_status_stress_4" /> <label for="attr_status_stress_4" title="4"></label> <label class="value" for="attr_status_stress_4" title="4">4</label> </div> <div class="statusbox stress_5 "> <input type="checkbox" value="None" id="attr_status_stress_5" name="attr_status_stress_5" /> <label for="attr_status_stress_5" title="5"></label> <label class="value" for="attr_status_stress_5" title="5">5</label> </div> <div class="statusbox stress_6 "> <input type="checkbox" value="None" id="attr_status_stress_6" name="attr_status_stress_6" /> <label for="attr_status_stress_6" title="6"></label> <label class="value" for="attr_status_stress_6" title="6">6</label> </div> <div class="statusbox stress_7 "> <input type="checkbox" value="None" id="attr_status_stress_7" name="attr_status_stress_7" /> <label for="attr_status_stress_7" title="7"></label> <label class="value" for="attr_status_stress_7" title="7">7</label> </div> <div class="statusbox stress_8 "> <input type="checkbox" value="None" id="attr_status_stress_8" name="attr_status_stress_8" /> <label for="attr_status_stress_8" title="8"></label> <label class="value" for="attr_status_stress_8" title="8">8</label> </div> <div class="statusbox stress_9 "> <input type="checkbox" value="None" id="attr_status_stress_9" name="attr_status_stress_9" /> <label for="attr_status_stress_9" title="9"></label> <label class="value" for="attr_status_stress_9" title="9">9</label> </div> <div class="statusbox stress_10 "> <input type="checkbox" value="None" id="attr_status_stress_10" name="attr_status_stress_10" /> <label for="attr_status_stress_10" title="10"></label> <label class="value" for="attr_status_stress_10" title="10">10</label> </div> </div> </section> <input class="hidden" type="checkbox" id="checkbox-mana" name="attr_status_mana"> <section class="repeat-mana"> <input class="options-flag" name="attr_options-flag-mana" type="checkbox" title="Show/hide options" type="checkbox" /><span>y</span> <div class="sheet-mana-header"> Magie <select class="hiddenBox" name="attr_usable_mana"> <option value=1 selected>1</option> <option value=22</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <option value=6>6</option> <option value=7>7</option> <option value=8>8</option> <option value=9>9</option> <option value=10>10</option> <option value=11>11</option> <option value=12>12</option> <option value=13>13</option> <option value=14>14</option> <option value=15>15</option> <option value=16>16</option> <option value=17>17</option> <option value=18>18</option> <option value=19>19</option> <option value=20>20</option> </select> </div> <div class="sheet-status-row mana"> <div class="statusbox magic_1 "> <input type="checkbox" value="None" id="attr_status_magic_1" name="attr_status_magic_1" /> <label for="attr_status_magic_1" title="1"></label> </div> <div class="statusbox magic_2 "> <input type="checkbox" value="None" id="attr_status_magic_2" name="attr_status_magic_2" /> <label for="attr_status_magic_2" title="2"></label> </div> <div class="statusbox magic_3 "> <input type="checkbox" value="None" id="attr_status_magic_3" name="attr_status_magic_3" /> <label for="attr_status_magic_3" title="3"></label> </div> <div class="statusbox magic_4 "> <input type="checkbox" value="None" id="attr_status_magic_4" name="attr_status_magic_4" /> <label for="attr_status_magic_4" title="4"></label> </div> <div class="statusbox magic_5 "> <input type="checkbox" value="None" id="attr_status_magic_5" name="attr_status_magic_5" /> <label for="attr_status_magic_5" title="5"></label> </div> <div class="statusbox magic_6 "> <input type="checkbox" value="None" id="attr_status_magic_6" name="attr_status_magic_6" /> <label for="attr_status_magic_6" title="6"></label> </div> <div class="statusbox magic_7 "> <input type="checkbox" value="None" id="attr_status_magic_7" name="attr_status_magic_7" /> <label for="attr_status_magic_7" title="7"></label> </div> <div class="statusbox magic_8 "> <input type="checkbox" value="None" id="attr_status_magic_8" name="attr_status_magic_8" /> <label for="attr_status_magic_8" title="8"></label> </div> <div class="statusbox magic_9 "> <input type="checkbox" value="None" id="attr_status_magic_9" name="attr_status_magic_9" /> <label for="attr_status_magic_9" title="9"></label> </div> <div class="statusbox magic_10 "> <input type="checkbox" value="None" id="attr_status_magic_10" name="attr_status_magic_10" /> <label for="attr_status_magic_10" title="10"></label> </div> <div class="statusbox magic_11 "> <input type="checkbox" value="None" id="attr_status_magic_11" name="attr_status_magic_11" /> <label for="attr_status_magic_11" title="11"></label> </div> <div class="statusbox magic_12 "> <input type="checkbox" value="None" id="attr_status_magic_12" name="attr_status_magic_12" /> <label for="attr_status_magic_12" title="12"></label> </div> <div class="statusbox magic_13 "> <input type="checkbox" value="None" id="attr_status_magic_13" name="attr_status_magic_13" /> <label for="attr_status_magic_13" title="13"></label> </div> <div class="statusbox magic_14 "> <input type="checkbox" value="None" id="attr_status_magic_14" name="attr_status_magic_14" /> <label for="attr_status_magic_14" title="14"></label> </div> <div class="statusbox magic_15 "> <input type="checkbox" value="None" id="attr_status_magic_15" name="attr_status_magic_15" /> <label for="attr_status_magic_15" title="15"></label> </div> <div class="statusbox magic_16 "> <input type="checkbox" value="None" id="attr_status_magic_16" name="attr_status_magic_16" /> <label for="attr_status_magic_16" title="16"></label> </div> <div class="statusbox magic_17 "> <input type="checkbox" value="None" id="attr_status_magic_17" name="attr_status_magic_17" /> <label for="attr_status_magic_17" title="17"></label> </div> <div class="statusbox magic_18 "> <input type="checkbox" value="None" id="attr_status_magic_18" name="attr_status_magic_18" /> <label for="attr_status_magic_18" title="18"></label> </div> <div class="statusbox magic_19 "> <input type="checkbox" value="None" id="attr_status_magic_19" name="attr_status_magic_19" /> <label for="attr_status_magic_19" title="19"></label> </div> <div class="statusbox magic_20 "> <input type="checkbox" value="None" id="attr_status_magic_20" name="attr_status_magic_20" /> <label for="attr_status_magic_20" title="20"></label> </div> </section> </div>

I have now found a solution with css, I use sass because then I have to write less, the "for" saves a lot of writing work. I choose an option from the select, this is written into the hidden input field and via css I read this out and then show the div's accordingly. css: @for $i from 1 through 20 div.mana_#{$i} display: none @for $i from 1 through 20 input[value="mana_#{$i}"] @for $j from 1 through $i & ~ div.mana_#{$j} display: inherit html: <section class="repeat-mana"> <input class="options-flag" name="attr_options-flag-mana" type="checkbox" title="Show/hide options" type="checkbox" /><span>y</span> <div class="sheet-mana-header"> Magie <select class="hiddenBox" name="attr_usable_mana"> <option value="mana_1" selected>1</option> <option value="mana_2">2</option> <option value="mana_3">3</option> <option value="mana_4">4</option> <option value="mana_5">5</option> <option value="mana_6">6</option> <option value="mana_7">7</option> <option value="mana_8">8</option> <option value="mana_9">9</option> <option value="mana_10">10</option> <option value="mana_11">11</option> <option value="mana_12">12</option> <option value="mana_13">13</option> <option value="mana_14">14</option> <option value="mana_15">15</option> <option value="mana_16">16</option> <option value="mana_17">17</option> <option value="mana_18">18</option> <option value="mana_19">19</option> <option value="mana_20">20</option> </select> </div> <div class="sheet-status-row mana"> <input type="hidden" name="attr_usable_mana" value="mana_1" /> <div class="statusbox mana_1"> <input type="checkbox" value="None" id="attr_status_mana_1" name="attr_status_mana_1" /> <label for="attr_status_mana_1" title="1"></label> </div> <div class="statusbox mana_2"> <input type="checkbox" value="None" id="attr_status_mana_2" name="attr_status_mana_2" /> <label for="attr_status_mana_2" title="2"></label> </div> <div class="statusbox mana_3"> <input type="checkbox" value="None" id="attr_status_mana_3" name="attr_status_mana_3" /> <label for="attr_status_mana_3" title="3"></label> </div> <div class="statusbox mana_4"> <input type="checkbox" value="None" id="attr_status_mana_4" name="attr_status_mana_4" /> <label for="attr_status_mana_4" title="4"></label> </div> <div class="statusbox mana_5"> <input type="checkbox" value="None" id="attr_status_mana_5" name="attr_status_mana_5" /> <label for="attr_status_mana_5" title="5"></label> </div> <div class="statusbox mana_6"> <input type="checkbox" value="None" id="attr_status_mana_6" name="attr_status_mana_6" /> <label for="attr_status_mana_6" title="6"></label> </div> <div class="statusbox mana_7"> <input type="checkbox" value="None" id="attr_status_mana_7" name="attr_status_mana_7" /> <label for="attr_status_mana_7" title="7"></label> </div> <div class="statusbox mana_8"> <input type="checkbox" value="None" id="attr_status_mana_8" name="attr_status_mana_8" /> <label for="attr_status_mana_8" title="8"></label> </div> <div class="statusbox mana_9"> <input type="checkbox" value="None" id="attr_status_mana_9" name="attr_status_mana_9" /> <label for="attr_status_mana_9" title="9"></label> </div> <div class="statusbox mana_10"> <input type="checkbox" value="None" id="attr_status_mana_10" name="attr_status_mana_10" /> <label for="attr_status_mana_10" title="10"></label> </div> <div class="statusbox mana_11"> <input type="checkbox" value="None" id="attr_status_mana_11" name="attr_status_mana_11" /> <label for="attr_status_mana_11" title="11"></label> </div> <div class="statusbox mana_12"> <input type="checkbox" value="None" id="attr_status_mana_12" name="attr_status_mana_12" /> <label for="attr_status_mana_12" title="12"></label> </div> <div class="statusbox mana_13"> <input type="checkbox" value="None" id="attr_status_mana_13" name="attr_status_mana_13" /> <label for="attr_status_mana_13" title="13"></label> </div> <div class="statusbox mana_14"> <input type="checkbox" value="None" id="attr_status_mana_14" name="attr_status_mana_14" /> <label for="attr_status_mana_14" title="14"></label> </div> <div class="statusbox mana_15"> <input type="checkbox" value="None" id="attr_status_mana_15" name="attr_status_mana_15" /> <label for="attr_status_mana_15" title="15"></label> </div> <div class="statusbox mana_16"> <input type="checkbox" value="None" id="attr_status_mana_16" name="attr_status_mana_16" /> <label for="attr_status_mana_16" title="16"></label> </div> <div class="statusbox mana_17"> <input type="checkbox" value="None" id="attr_status_mana_17" name="attr_status_mana_17" /> <label for="attr_status_mana_17" title="17"></label> </div> <div class="statusbox mana_18"> <input type="checkbox" value="None" id="attr_status_mana_18" name="attr_status_mana_18" /> <label for="attr_status_mana_18" title="18"></label> </div> <div class="statusbox mana_19"> <input type="checkbox" value="None" id="attr_status_mana_19" name="attr_status_mana_19" /> <label for="attr_status_mana_19" title="19"></label> </div> <div class="statusbox mana_20"> <input type="checkbox" value="None" id="attr_status_mana_20" name="attr_status_mana_20" /> <label for="attr_status_mana_20" title="20"></label> </div> </div> </section>

Can you use Sass in roll20, or do you need to ocnvert it back to standard CSS before use? You can find out by trying to load it in the custom sheet sandbox.

You have a lot of label ements like this: <label for="attr_status_mana_16" title="16"></label> what do they do, since there is no label text?

GiGs said: Can you use Sass in roll20, or do you need to ocnvert i write everything via vscodium and there i have the plugin glenn2223.live-sass, which automatically creates a css file when i save. I tried to load sass once, but that didn't work. GiGs said: what do they do, since there is no label text? i use all this for css, ions are loaded there, here is an example: <a href="https://codeberg.org/ButterflyAspect/roll20-character-sheet/src/branch/attribut-fertigkeiten-rework/ButterflyAspect.sass#L521" rel="nofollow">https://codeberg.org/ButterflyAspect/roll20-character-sheet/src/branch/attribut-fertigkeiten-rework/ButterflyAspect.sass#L521</a>

The way I would do this: I want to display only as many " statusbox wounds_" as I have selected in the "attr_usable_wounds" selectbox above. The same of course for stress and mana. Create a bunch of inputs, and before each, have a hidden input (with a class) like this: &lt;div class="sheet-status-row mana"&gt; &lt;input type="hidden" name="attr_usable_mana_1" class="toggle" value="1" /&gt; &lt;input type="checkbox" value="None" class="statusbox mana_1" name="attr_status_mana_1" /&gt; &lt;input type="hidden" name="attr_usable_mana_2" class="toggle" value="1" /&gt; &lt;input type="checkbox" value="None" class="statusbox mana_2" name="attr_status_mana_2" /&gt; &lt;input type="hidden" name="attr_usable_mana_3" class="toggle" value="1" /&gt; &lt;input type="checkbox" value="None" class="statusbox mana_3" name="attr_status_mana_3" /&gt; &lt;!-- and so on, for as many mana boxes as you want --&gt; Then in your script block, when the select changes, get its value and set the hidden boxes below that value to 1, and above that vlaue to 0. on ( 'change:usable_mana' , () =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; getAttrs ([ 'usable_mana' ], values =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const usable_mana = parseInt ( v . usable_mana ) || 0 ; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const mana_boxes = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 , 12 , 13 , 14 , 15 , 16 , 17 , 18 , 19 , 20 ]; //there are ways to generate this more programatically */ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const output = {}; // wehn saving multiple attributes, its a good idea to put them in an object variable. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mana_boxes . forEach ( mana =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ( mana &lt;= usable_mana ) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output [ `usable_mana_ ${ mana } ` ] = 1 ; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output [ `usable_mana_ ${ mana } ` ] = 0 ; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output [ `status_mana_ ${ mana } ` ] = 0 ; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs ( output ); &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; }); Finally create a single CSS&nbsp; rule to hide the onput where usable_mana = 0, like this: div.mana input.toggle:not ([ value = "1" ]) + input [ type = "checkbox" ] .statusbox { &nbsp; &nbsp; display : none ; } That's the method. I'd check the syntax.

which is actually the better way? via script or via css?

I would say Script. The only way I can think of doing it by css would require a LOT of code. Do you have an efficient way to do it by css? Though if you can use sass and convert it to CSS, that may be slightly less onerous to write - notice how little css code, the script version needs (relying on the + operator isntead of ~). By the way, you one of two people I've noticed using sass just in the last couple of days. Is there some way to easily convert sass to css that has emrged recently? What method are you using?

for saving the lines in the css i have more in the html 😅 GiGs said: By the way, you one of two people I've noticed using sass just in the last couple of days. Is there some way to easily convert sass to css that has emrged recently? What method are you using? Every IDE can actually do this, like VS code; otherwise just search for sass to css, there are countless tools, for example: <a href="https://www.coderstool.com/sass-to-css" rel="nofollow">https://www.coderstool.com/sass-to-css</a>

I know there are IDEs that can do this, I'm looking for the simplest approach or not using it at all.

The easiest way would be to take the code and copy it into one of the web converters, like the one linked above.

Tealk said: css: @for $i from 1 through 20 div.mana_#{$i} display: none @for $i from 1 through 20 input[value="mana_#{$i}"] @for $j from 1 through $i &amp; ~ div.mana_#{$j} display: inherit To make this a little less crazy, you can simplify this down to just: @for $i from 1 through 20 input[value="mana_#{$i}"] @for $j from 1 through $i &amp; ~ div.mana_#{$j} ~ [class^="mana_"] display: none While this doesn't save you a lot of sass writing, it saves a ton of css rules being made which will make your code more performant. I'd also recommend giving the hidden input a class and then using that class instead of just input. And finally, and this is just personal preference, I think SCSS is a better syntax as it uses actual css syntax instead of the tab indentation.

And, chiming in on the script vs css debate. I think they are equivalent. If you are already processing sass/scss to make your css, then the css is fine (and something I use a ton). If you aren't using a build system via command line that builds your css/html for you, then the script method is better. All that said, when Beacon goes fully live, using a build system is going to be the best way to build a sheet.

Beacon?

The new sheet infrastructure that is being worked on

Scott C. said: And, chiming in on the script vs css debate. I think they are equivalent. If you are already processing sass/scss to make your css, then the css is fine (and something I use a ton). If you aren't using a build system via command line that builds your css/html for you, then the script method is better. I'd agree with this. The more I thought about it later, the more I thought there's really not much in it, especially if you are already using sass.

OK thank you very much

Scott C. said: To make this a little less crazy, you can simplify this down to just: @for $i from 1 through 20 input[value="mana_#{$i}"] @for $j from 1 through $i &amp; ~ div.mana_#{$j} ~ [class^="mana_"] display: none thanks for the idea so I save myself some css, I have added an ID for the field that is read out. That would be the correct code: &amp;.mana @for $i from 1 through 19 input#attr_usable_mana[value="#{$i}"] @for $j from ($i + 1) through 20 &amp; ~ div.mana_#{$j} display: none

With help from a linux forum, I was able to optimise this even further. @for $i from 1 through 10 &nbsp; input#attr_usable_wounds[value="#{$i}"] ~div.wounds:nth-child(n+#{$i + 3}) &nbsp; &nbsp; display: none