(Coding question) Collapsible inventory coding

I'm trying to figure how how to make the check-box make an inventory item collapse and expandable. I'm not sure what I'm doing wrong and I'm open to help or alternatives. I appreciate any help I can get for this, I don't know where I'm going wrong or how to accomplish this exactly. Here's what I got... <div class="melee-sheet">                  <table cellpadding="10" cellspacing="0">             <tr>                 <td colspan="3" class="sheet-statlabel-big-gray" style="font-size: 1.5em; width: 450px;">Strength Weapons</td>             </tr>         </table>         <fieldset class="repeating_meleeweapons">             <label class="labelcheck" title="collapse this item"> <input name="attr_simpleinventory" type="checkbox" value="hide"> <span style="font-size: 12px;">Collapse</span> </label>                          <table cellpadding="0" cellspacing="0">                 <tr>                     <td class="sheet-statlabel-big" style="font-size: 1.5em; width: 210px;">Name</td>                     <td class="sheet-statlabel" style="width: 100px;">Attack Bonus</td>                     <td class="sheet-statlabel" style="width: 60px;">Damage</td>                     <td class="sheet-statlabel" style="width: 45px;">Roll</td>                                     </tr>                 <tr>                     <td><input class="sheet-inputbox" type="text" name="attr_meleeweaponname" style="height: 24px; width: 210px;"></td>                     <td><input class="sheet-inputbox" type="text" name="attr_meleeweaponattackbonus" style="height: 24px; width: 100px;"></td>                     <td><input class="sheet-inputbox" type="text" name="attr_meleeweapondamage" style="height: 24px; width: 60px;"></td>                     <td><button type="roll" value="@{whisper}&{template:5eAttack} {{name=@{meleeweaponname}}} {{subtags=@{meleeweapontype}}} {{technique=@{meleetechnique}}} {{attack=[[@{meleeweaponattackbonus}+@{meleeattacktotal}+1d20cs>@{mcritr}]]}} {{damage=[[@{meleeweapondamage}]]}} {{chance1=[[1d100cs<@{mproc}]]}} {{chance2=[[1d100cs<@{mproc2}]]}} {{powercost=[[@{meleepower}]] @{ammodmg1}}} {{crit=[[@{meleecrit}]]}} {{attack2=[[@{meleeweaponattackbonus}+@{meleeattacktotal}+@{meleecritattack}+1d20cs>@{mcritr}]]}}" style="height: 24px; width: 45px;" name="roll_meleeweaponattackcheck"></button></td>                 </tr>                             <tr>                     <td class="sheet-statlabel" name="meleeweapontype" style="width: 210px;">Damage Type</td>                                         <td class="sheet-statlabel" name="meleeweaponrange" style="width: 100px;">Critical Strike</td>                     <td class="sheet-statlabel" name="meleecritdmg" style="width: 60px;">Critical<br> Damage</td>                     <td class="sheet-statlabel" name="meleecritrange" style="width: 45px;">Critical<br> Hit</td>                                       </tr>                 <tr>                     <td><input class="sheet-inputbox" type="text" name="attr_meleeweapontype" style="height: 24px; width: 210px;"></td>                     <td><input class="sheet-inputbox" type="text" name="attr_meleecritattack" style="height: 24px; width: 100px;"></td>                                        <td><input class="sheet-inputbox" type="text" name="attr_meleecrit" style="height: 24px; width: 60px;"></td>                     <td><input class="sheet-inputbox" type="text" name="attr_mcritr" style="height: 24px; width: 45px;"></td>                                       </tr>                 <tr>                     <td class="sheet-statlabel" name="meleeweapontechnique" style="width: 210px;">Technique</td>                     <td class="sheet-statlabel" name="meleeweaponrange" style="width: 100px;">Range</td>                                         <td class="sheet-statlabel" name="meleeammocost" style="width: 70px;">Ammo <br>cost</td>                                          <td class="sheet-statlabel" name="meleeprocs" style="width: 45px;">Proc<br> Chance</td>                 </tr>                 <tr>                     <td><select style="height: 24px; width: 210px;" name="attr_meleetechnique">                     <option value="None" selected>Technique</option>                     <option value="Autofire">Autofire</option>                     <option value="Multifire">Multifire</option>                     <option value="Single fire">Single fire</option>                     <option value="Dualwielding">Dualwielding</option>                     <option value="Dualwielding (unarmed)">Dualwielding (unarmed)</option>                                        <option value="1handed">Unarmed</option>                                         <option value="1handed">1handed</option>                     <option value="2handed">2handed</option>                     <option value="Offhand">Offhand</option>                     </select></td>                      <td><input class="sheet-inputbox" type="text" name="attr_meleeweaponrange" style="height: 24px; width: 100px;"></td>                      <td><input class="sheet-inputbox" type="text" name="attr_meleepower" style="height: 24px; width: 60px;"></td>                     <td><input class="sheet-inputbox" type="text" name="attr_mproc" style="height: 24px; width: 45px;"></td>                 </tr>                 <tr>                     <td class="sheet-statlabel" name="meleeweaponnotes" style="width: 210px;">Notes</td>                     <td class="sheet-statlabel" name="meleepowerpack" style="width: 100px;">Max Power Pack</td>                     <td class="sheet-statlabel" name="meleeammocost" style="width: 60px;">Current<br> Ammo</td>                                          <td class="sheet-statlabel" name="meleeprocs2" style="width: 45px;">Proc<br> Chance 2</td>                 </tr>                 <tr>                     <td><input class="sheet-inputbox" type="text" name="attr_meleeweaponnotes" style="height: 24px; width: 210px;"></td>                     <td><input class="sheet-inputbox" type="text" name="attr_mpowerpack" style="height: 24px; width: 100px;"></td>                     <td><input class="sheet-inputbox" type="text" name="attr_mcurrentammo" style="height: 24px; width: 60px;"></td>                     <td><input class="sheet-inputbox" type="text" name="attr_mproc2" style="height: 24px; width: 45px;"></td>                  </tr>             </table>             <table cellpadding="10" cellspacing="0">                 <tr>                     <td colspan="3" class="sheet-statlabel-big-gray" style="font-size: 1.5em; width: 450px;">Weapon Mods</td>                 </tr>                 <tr>                     <td class="sheet-statlabel" style="width: 60px;">Power Effiency mod equipped: <input name="attr_ammodmg1" type="checkbox" value="bonus damage"></td>                    </tr>                             </table>             <textarea name="attr_notes" style="width: 460px; height: 100px;"></textarea>         </fieldset>     </div>

If you just want to make a single inventory item visible or hidden, you must give your table (or div if using a superior approach, see below) a class. Your checkbox must have a class too. Your checkbox has a class labelcheck . Lets say you give the table a class of hide . Then use this CSS: checkbox.labelcheck:checked + .hide { &nbsp;&nbsp;&nbsp; display: none; } If using legacy code, the above would be checkbox.sheet-labelcheck:checked + .hide { &nbsp;&nbsp;&nbsp; display: none; } If you're not sure if you're using legacy code, try them both. You shouldn't use tables for layout on Roll20, espeically if you ever hope to release the sheet for public use. Roll20 will automatically reject any sheet that uses tables for layout, and no appeal against this will be considered. <a href="https://cybersphere.me/dont-use-table-use-grid/" rel="nofollow">https://cybersphere.me/dont-use-table-use-grid/</a> Also you have a lot of inline styles there. You'd be better off shifting them to CSS Classes - it's not required, but you'll be happier you did in the long run.

I would also suggest posting in the&nbsp; Character Sheet Forum &nbsp;for future questions on coding custom character sheets. You’ll likely get a lot of cross-over here, but that forum is dedicated to the topic and you can also read through there for other ideas.&nbsp;

I just noticed that with the way you have structured your checkbox the code I suggested won't work. You need the checkbox to be on the same "level" as the table, and immediately before it, not inside a label.

Here's what I'm trying and keep failing at. &lt;style type="text/css"&gt; .griddypop { display: grid; grid-template-columns: auto auto auto auto; } .weaponlabel { background-color: black; /* black */ color: white; /* white */ font-size: 0.9em; text-align: center; } checkbox.hideequip:checked + .hide { display: grid; grid-template-columns: auto auto auto auto; height: 25px; overflow:hide; } .charsheet label { display: inline-block; width: 75px; text-align: right; } .charsheet input { background-color: transparent; /* background-color: transparent; Input boxes for stats */ color: #0047ab; border-style: solid; border-color: black; /* black */ border-width: 0px 0px 2px 0px; } .charsheet input.sheet-inputbox { background-color: transparent; /* background-color: transparent; Input boxes for stats */ color: #0047ab; border-style: solid; border-color: black; /* black */ border-width: 1px 1px 1px 1px; } &lt;/style&gt; &lt;input name="attr_simpleattack" type="checkbox" value="click me"&gt; &lt;label class="hideequip" title="bob do something"&gt;&lt;span style="font-size: 0.8em;"&gt;hide details&lt;/span&gt;&lt;/label&gt; &lt;div style="width: 400px; height: auto;" class="griddypop"&gt; &lt;span class="weaponlabel"&gt;Name &lt;/span&gt; &lt;span class="weaponlabel" &gt;Attack Bonus&lt;/span&gt; &lt;span class="weaponlabel" &gt;Damage&lt;/span&gt; &lt;span class="weaponlabel"&gt;Roll&lt;/span&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleeweaponname" style="height: 24px; width: 210px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleeweaponattackbonus" style="height: 24px; width: 100px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleeweapondamage" style="height: 24px; width: 60px;"&gt; &lt;button type="roll" value="@{whisper}&amp;{template:5eAttack} {{name=@{meleeweaponname}}} {{subtags=@{meleeweapontype}}} {{technique=@{meleetechnique}}} {{attack=[[@{meleeweaponattackbonus}+@{meleeattacktotal}+1d20cs&gt;@{mcritr}]]}} {{damage=[[@{meleeweapondamage}]]}} {{chance1=[[1d100cs&lt;@{mproc}]]}} {{chance2=[[1d100cs&lt;@{mproc2}]]}} {{powercost=[[@{meleepower}]] @{ammodmg1}}} {{crit=[[@{meleecrit}]]}} {{attack2=[[@{meleeweaponattackbonus}+@{meleeattacktotal}+@{meleecritattack}+1d20cs&gt;@{mcritr}]]}}" style="height: 24px; width: 45px;" name="roll_meleeweaponattackcheck"&gt;&lt;/button&gt; &lt;div class="hide"&gt; &lt;span class="weaponlabel"&gt;Damage type&lt;/span&gt; &lt;span class="weaponlabel" &gt;Critical Strike&lt;br&gt;chance&lt;/span&gt; &lt;span class="weaponlabel" &gt;Critical &lt;br&gt;Damage&lt;/span&gt; &lt;span class="weaponlabel"&gt;Critical&lt;br&gt;Hit&lt;/span&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleeweapontype" style="height: 24px; width: 210px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleecritattack" style="height: 24px; width: 100px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleecrit" style="height: 24px; width: 60px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_mcritr" style="height: 24px; width: 45px;"&gt; &lt;span class="weaponlabel"&gt;Technique&lt;/span&gt; &lt;span class="weaponlabel" &gt;Range&lt;/span&gt; &lt;span class="weaponlabel" &gt;Ammo &lt;br&gt;Cost&lt;/span&gt; &lt;span class="weaponlabel"&gt;Proc &lt;br&gt;chance&lt;/span&gt; &lt;select class="sheet-inputbox" style="height: 24px; width: 210px;" name="attr_meleetechnique"&gt; &lt;option value="None" selected&gt;Technique&lt;/option&gt; &lt;option value="Autofire"&gt;Autofire&lt;/option&gt; &lt;option value="Multifire"&gt;Multifire&lt;/option&gt; &lt;option value="Single fire"&gt;Single fire&lt;/option&gt; &lt;option value="Dualwielding"&gt;Dualwielding&lt;/option&gt; &lt;option value="Dualwielding (unarmed)"&gt;Dualwielding (unarmed)&lt;/option&gt; &lt;option value="1handed"&gt;Unarmed&lt;/option&gt; &lt;option value="1handed"&gt;1handed&lt;/option&gt; &lt;option value="2handed"&gt;2handed&lt;/option&gt; &lt;option value="Offhand"&gt;Offhand&lt;/option&gt; &lt;/select&gt; &lt;input class="hideequip" type="text" name="attr_meleeweaponrange" style="height: 24px; width: 100px;"&gt; &lt;input class="hideequip" type="text" name="attr_meleepower" style="height: 24px; width: 60px;"&gt; &lt;input class="hideequip" type="text" name="attr_mproc" style="height: 24px; width: 45px;"&gt; &lt;span class="weaponlabel" &gt;Notes&lt;/span&gt; &lt;span class="weaponlabel" &gt;Max Power Pack&lt;/span&gt; &lt;span class="weaponlabel" &gt;Current&lt;br&gt; Ammo&lt;/span&gt; &lt;span class="weaponlabel" &gt; Proc&lt;br&gt; Chance 2&lt;/span&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleeweaponnotes" style="height: 24px; width: 210px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_mpowerpack" style="height: 24px; width: 100px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_mcurrentammo" style="height: 24px; width: 60px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_mproc2" style="height: 24px; width: 45px;"&gt; &lt;/div&gt; &lt;/div&gt;

When you say you're trying and failing it at, how specifically is it failing?

Also note, if you want the checkbox to hide the div using that css, you need to have the checjbox be the last thing before the div - you cannot have the lable between the checkbox and the div. In that case, change the + to ~ Also the div need a class which matched the hide rule, so either give it the hide class or give the checkbox rule the griddypop class.

Also, dont put this &lt;style type="text/css"&gt; and the code that follows it in your html page. Create a separate css file to hold those contents.

Okay, so I was able to get this code put together for what I'm trying to do with the help of my sister. Unfortunately she doesn't know how R20 does its coding. So I need help figuring out why this &nbsp;won't this work on Roll20 but it does work on 2 other HTML editors when I run them through those programs. What I'm Trying to do: Hide the unwanted details of a weapon attack by click of a checkbox. (R20's 5e sheets do this for all weapon attacks) &lt;input name="attr_simpleattack" type="checkbox" value="click me" onclick="myFunction()"&gt; &lt;label class="hideequip" title="bob do something"&gt;&lt;span style="font-size: 0.8em;"&gt;hide details&lt;/span&gt;&lt;/label&gt; &lt;div style="width: 400px; height: auto;" class="griddypop"&gt; &lt;span class="weaponlabel"&gt;Name &lt;/span&gt; &lt;span class="weaponlabel" &gt;Attack Bonus&lt;/span&gt; &lt;span class="weaponlabel" &gt;Damage&lt;/span&gt; &lt;span class="weaponlabel"&gt;Roll&lt;/span&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleeweaponname" style="height: 24px; width: 210px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleeweaponattackbonus" style="height: 24px; width: 100px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleeweapondamage" style="height: 24px; width: 60px;"&gt; &lt;button type="roll" value="@{whisper}&amp;{template:5eAttack} {{name=@{meleeweaponname}}} {{subtags=@{meleeweapontype}}} {{technique=@{meleetechnique}}} {{attack=[[@{meleeweaponattackbonus}+@{meleeattacktotal}+1d20cs&gt;@{mcritr}]]}} {{damage=[[@{meleeweapondamage}]]}} {{chance1=[[1d100cs&lt;@{mproc}]]}} {{chance2=[[1d100cs&lt;@{mproc2}]]}} {{powercost=[[@{meleepower}]] @{ammodmg1}}} {{crit=[[@{meleecrit}]]}} {{attack2=[[@{meleeweaponattackbonus}+@{meleeattacktotal}+@{meleecritattack}+1d20cs&gt;@{mcritr}]]}}" style="height: 24px; width: 45px;" name="roll_meleeweaponattackcheck"&gt;&lt;/button&gt; &lt;div id="myDIV" class="griddypop"&gt; &lt;span class="weaponlabel"&gt;Damage type&lt;/span&gt; &lt;span class="weaponlabel" &gt;Critical Strike&lt;br&gt;chance&lt;/span&gt; &lt;span class="weaponlabel" &gt;Critical &lt;br&gt;Damage&lt;/span&gt; &lt;span class="weaponlabel"&gt;Critical&lt;br&gt;Hit&lt;/span&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleeweapontype" style="height: 24px; width: 210px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleecritattack" style="height: 24px; width: 100px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleecrit" style="height: 24px; width: 60px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_mcritr" style="height: 24px; width: 45px;"&gt; &lt;span class="weaponlabel"&gt;Technique&lt;/span&gt; &lt;span class="weaponlabel" &gt;Range&lt;/span&gt; &lt;span class="weaponlabel" &gt;Ammo &lt;br&gt;Cost&lt;/span&gt; &lt;span class="weaponlabel"&gt;Proc &lt;br&gt;chance&lt;/span&gt; &lt;select class="sheet-inputbox" style="height: 24px; width: 210px;" name="attr_meleetechnique"&gt; &lt;option value="None" selected&gt;Technique&lt;/option&gt; &lt;option value="Autofire"&gt;Autofire&lt;/option&gt; &lt;option value="Multifire"&gt;Multifire&lt;/option&gt; &lt;option value="Single fire"&gt;Single fire&lt;/option&gt; &lt;option value="Dualwielding"&gt;Dualwielding&lt;/option&gt; &lt;option value="Dualwielding (unarmed)"&gt;Dualwielding (unarmed)&lt;/option&gt; &lt;option value="1handed"&gt;Unarmed&lt;/option&gt; &lt;option value="1handed"&gt;1handed&lt;/option&gt; &lt;option value="2handed"&gt;2handed&lt;/option&gt; &lt;option value="Offhand"&gt;Offhand&lt;/option&gt; &lt;/select&gt; &lt;input class="hideequip" type="text" name="attr_meleeweaponrange" style="height: 24px; width: 100px;"&gt; &lt;input class="hideequip" type="text" name="attr_meleepower" style="height: 24px; width: 60px;"&gt; &lt;input class="hideequip" type="text" name="attr_mproc" style="height: 24px; width: 45px;"&gt; &lt;span class="weaponlabel" &gt;Notes&lt;/span&gt; &lt;span class="weaponlabel" &gt;Max Power Pack&lt;/span&gt; &lt;span class="weaponlabel" &gt;Current&lt;br&gt; Ammo&lt;/span&gt; &lt;span class="weaponlabel" &gt; Proc&lt;br&gt; Chance 2&lt;/span&gt; &lt;input class="sheet-inputbox" type="text" name="attr_meleeweaponnotes" style="height: 24px; width: 210px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_mpowerpack" style="height: 24px; width: 100px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_mcurrentammo" style="height: 24px; width: 60px;"&gt; &lt;input class="sheet-inputbox" type="text" name="attr_mproc2" style="height: 24px; width: 45px;"&gt; &lt;/div&gt; &lt;/div&gt; and this is at the bottom of the sheet in the script section: &lt;script type="text/worker"&gt; function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "grid"; } else { x.style.display = "none"; } } &lt;/script&gt;

Hello, here is an exemple how I make an expandable section &lt; div class = 'expandable-section' &gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt; input class = "expand-control" type = "hidden" name = "attr_expand_item" value = "1" /&gt; &nbsp; &nbsp; &lt; label class = "expand-button" &gt; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt; input type = "checkbox" name = "attr_expand_item" value = "1" checked = "true" /&gt;&lt; span class = "expand-state pictos" &gt; 4 &lt;/ span &gt; &nbsp; &nbsp; &lt;/ label &gt; &nbsp; &nbsp; &lt; div class = "expanded-view" &gt; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt; fieldset class = "repeating_En" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; div class = "dark_row" style = " font-size:20px;line-height:25px;" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; div &nbsp; class = "arme-title" style = " margin-left:75px; margin-top: 10px;" &gt; Nom &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt; div &nbsp; class = "arme-title" style = " margin-left:65px;" &gt; Dégâts base &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt; div &nbsp; class = "arme-title" style = " margin-left:18px;" &gt; PdV base &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt; div &nbsp; class = "arme-title" style = " margin-left:50px;" &gt; Description &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt; div class = "arme-title" style = " margin-left:140px;" &gt; Image &lt;/ div &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "dark_row" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; button &nbsp; type = "roll" title = "bestiaireDesc" name = "roll_desc" value = "&amp;{template:bestiaire} {{name=@{name &amp;#125; }} {{image=[Image](@{image})}} {{description=@{Description &amp;#125; }} {{carac1=@{FO &amp;#125; }} {{carac2=@{DEX &amp;#125; }} {{carac3=@{PO &amp;#125; }} {{pdv=@{PdvNv &amp;#125; }}" &gt;&lt;/ button &gt; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt; input class = "textbox" type = "text" name = "attr_name" style = " width:120px;" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt; input class = "textbox-stat" type = "number" name = "attr_Deg" style = " width:40px;text-align:center;" &gt; d10+ &lt;/ input &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input class = "textbox-stat" type = "number" name = "attr_DegModif" style = " width:40px;text-align:center;" /&gt; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt; input class = "textbox-stat" type = "number" name = "attr_PdV" style = " width:50px; margin-left:15px;" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt; textarea class = "textareaboxStat" type = "text" name = "attr_Description" style = " vertical-align: top; width:200px; margin-left:15px;" &gt;&lt;/ textarea &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt; textarea class = "textareaboxStat" type = "text" name = "attr_Image" value = "[Image](Lien)" style = " vertical-align: top; width:200px; margin-left: 5px;" &gt;&lt;/ textarea &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; br &gt; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt; div &nbsp; class = "arme-title" style = " margin-left:20px;" &gt; XP &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt; div class = "arme-title" style = " margin-left:35px;" &gt; FO &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt; div class = "arme-title" style = " margin-left:30px;" &gt; DEX &lt;/ div &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "arme-title" style = " margin-left:28px;" &gt; PO &lt;/ div &gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div &nbsp; class = "arme-title" style = " margin-left:43px;" &gt; Dégâts niveau &lt;/ div &gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div &nbsp; class = "arme-title" style = " margin-left:20px;" &gt; PdV niveau &lt;/ div &gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; br &gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input class = "textbox-stat" type = "number" name = "attr_Xp" style = " width:50px;" /&gt; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt; input class = "textbox-stat" type = "number" name = "attr_FO" style = " width:50px;text-align:center;" /&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input class = "textbox-stat" type = "number" name = "attr_DEX" style = " width:50px;text-align:center;" /&gt; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &lt; input class = "textbox-stat" type = "number" name = "attr_PO" style = " width:50px;" /&gt; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &lt; input class = "textbox-stat" type = "number" name = "attr_DegNv" style = " width:50px;text-align:center;" readonly = "readonly" &gt; d10+ &lt;/ input &gt; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt; input class = "textbox-stat" type = "number" name = "attr_DegModifNv" style = " width:50px;text-align:center;" readonly = "readonly" /&gt; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt; input class = "textbox-stat" type = "number" name = "attr_PdvNv" style = " width:60px; margin-left:15px;" readonly = "readonly" /&gt; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt; br &gt; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &lt; button type = "roll" style = " margin-left:80px;" title = "bestiaireEnForce" name = "roll_FO" value = "&amp;{template:enyllion} {{perso=@{name &amp;#125; }} {{name=Force}} {{Carac=[[@{FO}+?{Modificateur|0}]]}} &nbsp;{{Roll=[[1D100]]}}" &gt;&lt;/ button &gt; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &lt; button type = "roll" style = " margin-left:30px;" title = "bestiaireEnDexterité" name = "roll_DEX" value = "&amp;{template:enyllion} {{perso=@{name &amp;#125; }} {{name=Dexterité}} {{Carac=[[@{DEX}+?{Modificateur|0}]]}} &nbsp;{{Roll=[[1D100]]}}" &gt;&lt;/ button &gt; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &lt; button type = "roll" style = " margin-left:30px;" title = "bestiaireEnPouvoir" name = "roll_PO" value = "&amp;{template:enyllion} {{perso=@{name &amp;#125; }} {{name=Pouvoir}} {{Carac=[[@{PO}+?{Modificateur|0}]]}} &nbsp;{{Roll=[[1D100]]}}" &gt;&lt;/ button &gt; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &lt; button type = "roll" style = " margin-left:75px;" title = "bestiaireEnDegats" name = "roll_Degats" value = "&amp;{template:degats} {{perso=@{name &amp;#125; }} {{name=Dégats}} {{Roll=[[@{DegNv}d10+@{DegModifNv}]]}}" &gt;&lt;/ button &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ div &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; hr align = "center" width = "60%" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ fieldset &gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;/ div &gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class='collapsed-view'&gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;span&gt;What you want shown when the section is collapsed goes here&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;/ div &gt; .sheet-expand-control [ value = "0" ] ~ .sheet-expanded-view , .sheet-expand-control:not ([ value = "0" ]) ~ .sheet-collapsed-view { &nbsp; &nbsp; display : none ; } .sheet-expandable-section:not ( :hover ) &gt; .sheet-expand-button { &nbsp; &nbsp; opacity : 0 ; } .sheet-expand-control:not ([ value = "0" ]) ~ .sheet-expanded-view { &nbsp; &nbsp; margin-bottom : 0.5em ; } .sheet-expandable-section &gt; .sheet-expand-button { &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : auto ; &nbsp; &nbsp; grid-template-rows : auto ; &nbsp; &nbsp; grid-template-areas : "button" ; &nbsp; &nbsp; place-items : center ; &nbsp; &nbsp; width : auto ; &nbsp; &nbsp; height : auto ; } .sheet-expand-button &gt; span { &nbsp; &nbsp; font-family :pictos; } .sheet-expandable-section &gt; .sheet-expand-button &gt; input [ type = checkbox ]{ &nbsp; &nbsp; opacity : 0 ; &nbsp; &nbsp; z-index : 10 ; &nbsp; &nbsp; width : 100% ; &nbsp; &nbsp; height : 100% ; &nbsp; &nbsp; grid-area :button; } .sheet-expandable-section &gt; :not ( .sheet-expand-button ){ &nbsp; &nbsp; grid-column : 1 / -1 ; } .sheet-collapsed-view { &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; margin-bottom : 0.5em ; &nbsp; &nbsp; clip-path : var ( --spanPolygon ); &nbsp; &nbsp; min-height : 15px ; } .sheet-expandable-section &gt; .sheet-expand-button &gt; .sheet-expand-state { &nbsp; &nbsp; grid-area :button; } .sheet-expand-button &gt; input:checked ~ .sheet-expand-state { &nbsp; &nbsp; transform : rotate ( 90deg ); } You don't need a sheetworker to make this. Just use the CSS properties. You can look&nbsp; this page &nbsp;for the show/hide CSS method.

It's too early in my day to look through your code, but I can say this: some things that work on other sites do not work on roll20, at all, which is wht it's important to look through the Building Character Sheets page of the wiki. For example, this won't work: &lt;script type="text/worker"&gt; function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "grid"; } else { x.style.display = "none"; } } &lt;/script&gt; because javascript can only do certain specific things, and anything using the document object will never work. Incidentally this is why you should not prototype roll20 code anywhere but on roll20. Other sites will allow things that Roll20 doesn't, so you own't properly be testing your code.