Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Hiding Divs with check box

Hello guys!  I'm back for more expertise! I have 11 "main" divs for Psionics.  Each div has a changing amount of <TR> </TR>, meaning each psionic varies (NONE of these are repeating fields... I didn't want to get complicated haha). That said, I have a ton of blank, unused fields because... no repeating field.  So I have two things I need. 1. I have 11 psionics.  Each of them have a checkbox HTML action, however, when you check any of them, all of the psionics expand fully into their edit panels. 2. Each of the edit rows I would like to also hide so that you have to check a box to reveal it. Where the box is, I don't care. All of the sections follow the same pattern, but they have a differing amounts of fields. Here is the code for the smaller psionic.  Some have 16 fields. HTML <input class="sheet-abilities-toggle" type="hidden" name="attr_toggle-abilities"> <div class="widget sheet-section-abilities-hidden"> <div class="borderedContainer"> <table> <tr> <td class="skill-input green-color"><input type="checkbox" name="attr_toggle-abilities" value="1" checked> Edit</td> <td class="skill-name"><span class="subheading">Deflection</span></td> <td class="skill-bonus"><button class="blank-roll-button" type="roll" value="&{template:default} {{name=Deflection }} {{roll=[[1d20+@{psi_Deflection}+@{psi_Deflection_misc}]]}} {{Lucky=[[@{psi_Deflection_lucky}]]}} {{Lucky Desc.=@{psi_Deflection_lucky_desc}}} {{Ready=[[@{psi_Deflection_ready}]]}} {{Touched Desc.=@{psi_Deflection_touched_desc}}} {{Heightended Senses=[[@{psi_Deflection_heightened_senses}]]}} {{Heightened Senses Desc.=@{psi_deflection_heightened_senses_desc}}}"></button></td> <td class="skill-name text blue-color">RE <span class="text red-color" name="attr_psi_Deflection_re"></span></td> <td class="skill-name text blue-color">Def <span class="text red-color" name="attr_psi_Deflection"></span></td> <td class="skill-name text blue-color">Attr <span class="text red-color">CON</span></td> <td class="skill-name text blue-color">Misc <span class="text red-color" name="attr_psi_Deflection_misc"></span></td> <td class="skill-name text blue-color">Prog <span class="text red-color" name="attr_psi_Deflection_progression"></span></td> </tr> <tr> <td class="skill-name text blue-color">Lucky <span class="text red-color" name="attr_psi_Deflection_lucky"></span></td> <td class="skill-name text blue-color">Ready <span class="text red-color" name="attr_psi_Deflection_ready"></span></td> <td class="skill-name text blue-color">Touch <span class="text red-color" name="attr_psi_Deflection_touched"></span></td> <td class="skill-name text blue-color">HSen <span class="text red-color" name="attr_psi_Deflection_heightened_senses"></span></td> </tr> </table> </div> </div> <div class="widget sheet-section-abilities-revealed"> <div class="borderedContainer"> <table> <tr> <td class="skill-name green-color" style="text-align:center"><input type="checkbox" name="attr_toggle-abilities" value="1" checked>Edit</td> <td class="skill-name blue-color" style="text-align:center">Roll</td> <td class="skill-name blue-color" style="text-align:center">RE</td> <td class="skill-name blue-color" style="text-align:center">Level</td> <td class="skill-name blue-color" style="text-align:center">Attribute</td> <td class="skill-name blue-color" style="text-align:center">Misc</td> <td class="skill-name blue-color" style="text-align:center">Prog.</td> <td class="skill-name blue-color" style="text-align:center">Points</td> </tr> <tr> <td class="subheading" style="width: auto;" name="attr_psi_Deflection_name"/>Deflection</td> <td class="skill-bonus"><button class="blank-roll-button" type="roll" value="&{template:default} {{name=Deflection }} {{roll=[[1d20+@{psi_Deflection}+@{psi_Deflection_misc}]]}} {{Lucky=[[@{psi_Deflection_lucky}]]}} {{Lucky Desc.=@{psi_Deflection_lucky_desc}}} {{Ready=[[@{psi_Deflection_ready}]]}} {{Touched Desc.=@{psi_Deflection_touched_desc}}} {{Heightended Senses=[[@{psi_Deflection_heightened_senses}]]}} {{Heightened Senses Desc.=@{psi_deflection_heightened_senses_desc}}}"></button></td> <td class="skill-name"><input class="inputfield-abilities text" style="width: 55px; text-align: center; color:yellow-color" type="text" value="0" name="attr_psi_Deflection_re" value="0"/></td> <td><span class="subsubheading text red-color" name="attr_psi_Deflection"></span></td> <!-- This is the level of the psionic only REFERENCED from--> <td class="skill-attribute"> <select class="inputfield" type="text" style="width: auto; margin-top:8px" name="attr_skillAttribute"> <option value="0" disabled hidden selected></option> <option value="@{strength}" style="color:white;background:#000000;">STR</option> <option value="@{dexterity}" style="color:white;background:#000000;">DEX</option> <option value="@{constitution}" style="color:white;background:#000000;">CON</option> <option value="@{intelligence}" style="color:white;background:#000000;">INT</option> <option value="@{wisdom}" style="color:white;background:#000000;">WIS</option> <option value="@{charisma}" style="color:white;background:#000000;">CHA</option> </select> </td> <td class="text blue-color"><input class="inputfield-abilities text" style="width: 55px;" type="text" value="0" name="attr_psi_Deflection_misc" min="0" max="999"/></td> <td class="skill-progression"> <select class="text dropdown grey" type="text" name="attr_psi_Deflection_progression"> <option style="color:white;background:#000000;">1,2,3,4,5...</option> <option style="color:white;background:#000000;">4,5,6,7</option> <option style="color:white;background:#000000;">3,4,5,6</option> <option style="color:white;background:#000000;">2,3,4,5</option> <option style="color:white;background:#000000;">1,2,3,4</option> <option style="color:white;background:#000000;">3,3,3,3</option> <option style="color:white;background:#000000;">5,5,5,5</option> <option style="color:white;background:#000000;">10,10,10,10</option> </select> </td> <td class="text blue-color"><input class="inputfield-abilities text" style="width: 55px;" type="text" value="0" name="attr_psi_Deflection_skill_points" min="0" max="999"/></td> </tr> <tr> <td class="text blue-color">Lucky</td> <td class="text blue-color"><input class="inputfield-abilities text" style="width: 77px;" type="text" value="0" name="attr_psi_deflection_lucky" /></td> <td class="text blue-color">Desc.</td> <td colspan="5"> <input class="inputfield-abilities" type="text" value="0" style="width:99%;" value="Missing Desc." name="attr_psi_deflection_lucky_desc" /> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="text blue-color">Ready</td> <td class="text blue-color"><input class="inputfield-abilities text" value="0" style="width: 77px;" type="text" value="0" name="attr_psi_deflection_ready" /></td> <td class="text blue-color">Desc.</td> <td colspan="5"> <input class="inputfield-abilities" type="text" value="0" style="width:99%;" value="Missing Desc." name="attr_psi_deflection_ready_desc" /></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td class="text blue-color">Touched</td> <td class="text blue-color"><input class="inputfield-abilities text" value="0" style="width: 77px;" type="text" value="0" name="attr_psi_deflection_touched" /></td> <td class="text blue-color">Desc.</td> <td colspan="5"> <input class="inputfield-abilities" type="text" value="0" style="width:99%;" value="Missing Desc." name="attr_psi_deflection_touched_desc" /></td> </tr> <tr> <td class="text blue-color">Heightended Senses</td> <td class="text blue-color"><input class="inputfield-abilities text" value="0" style="width: 77px;" type="text" value="0" name="attr_psi_deflection_heightened_senses" /></td> <td class="text blue-color">Desc.</td> <td colspan="5"> <input class="inputfield-abilities" type="text" value="0" style="width:99%;" value="Missing Desc." name="attr_psi_deflection_heightened_senses_desc" /></td> </tr> </table> </div> </div CSS div.sheet-section-abilities-revealed { display: inline; } div.sheet-section-abilities-hidden { /* display: inline-block; */ display: none; } input.sheet-abilities-toggle[value="0"] ~ div.sheet-section-abilities-revealed { display: none; } input.sheet-abilities-toggle[value="0"] ~ div.sheet-section-abilities-hidden { display: inline; }
1649146317

Edited 1649146503
GiGs
Pro
Sheet Author
API Scripter
It's hard to say without seeing the full code, but here are things I notice: As it stands, you seem to have all of these controlled by just one input. If so, all ability sections will be revealed, and all will be hidden depending on that value. You should set a default value for your hidden attribute: &lt;input class="sheet-abilities-toggle" type="hidden" name="attr_toggle-abilities" value="0"&gt; Set it to 1 if your checkbox is checked by default. Also make sure the checkbox has value="1". You can post the full code by cutting out the interior bits, something like: &lt;input class="sheet-abilities-toggle" type="hidden" name="attr_toggle-abilities"&gt; &lt;div class="widget sheet-section-abilities-hidden"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hidden &lt;/div&gt; &lt;div class="widget sheet-section-abilities-revealed"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Revealed &lt;/div You can test all 11 areas by using code like this, and post what is outside the divs for us to see. Unrelated, since you are using tables for layout, are you aware that roll20 will always reject character sheets using tables? Grid is an easier and more concise alternative, as shown here: <a href="https://cybersphere.me/dont-use-table-use-grid/" rel="nofollow">https://cybersphere.me/dont-use-table-use-grid/</a>
GiGs said: It's hard to say without seeing the full code, but here are things I notice: As it stands, you seem to have all of these controlled by just one input. If so, all ability sections will be revealed, and all will be hidden depending on that value. You should set a default value for your hidden attribute: &lt;input class="sheet-abilities-toggle" type="hidden" name="attr_toggle-abilities" value="0"&gt; Set it to 1 if your checkbox is checked by default. Also make sure the checkbox has value="1". You can post the full code by cutting out the interior bits, something like: &lt;input class="sheet-abilities-toggle" type="hidden" name="attr_toggle-abilities"&gt; &lt;div class="widget sheet-section-abilities-hidden"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hidden &lt;/div&gt; &lt;div class="widget sheet-section-abilities-revealed"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Revealed &lt;/div You can test all 11 areas by using code like this, and post what is outside the divs for us to see. Unrelated, since you are using tables for layout, are you aware that roll20 will always reject character sheets using tables? Grid is an easier and more concise alternative, as shown here: <a href="https://cybersphere.me/dont-use-table-use-grid/" rel="nofollow">https://cybersphere.me/dont-use-table-use-grid/</a> Thanks GiGs! Yeah, I found out that they are rejecting table char sheets a few days ago :(.&nbsp; I've been working on this one for several years.&nbsp; Now I have to figure out how to convert 5000 lines of code over.&nbsp; So I figured I should just finish it.&nbsp; Ore hire out to update it.
1649171634

Edited 1649171658
GiGs
Pro
Sheet Author
API Scripter
mass cut &amp; paste is probably the way to go. If your tr, td, and table dont contain styles, it wont take much work. Remember to convert to CSS Grid, you dont need to add anything to the HTML, just remove things. You can do a mass replace of &lt;td&gt; with "" , likewise for &lt;/td&gt;, &lt;tr&gt; and &lt;/tr&gt; Then just need to change every remaining table to a div with a class, and in the CSS page, assign the right number of columns to that class. (You might want to the tables -&gt; div first, so you can see how many columns they have and if you need to set any specific widths.) It's tedious, but probably not as big a job as you're expecting. If you have added styles or other tags inside the tr and tds, it gets a lot harder. Make a backup of your files first though, in case you mess up.
GiGs said: mass cut &amp; paste is probably the way to go. If your tr, td, and table dont contain styles, it wont take much work. Remember to convert to CSS Grid, you dont need to add anything to the HTML, just remove things. You can do a mass replace of &lt;td&gt; with "" , likewise for &lt;/td&gt;, &lt;tr&gt; and &lt;/tr&gt; Then just need to change every remaining table to a div with a class, and in the CSS page, assign the right number of columns to that class. (You might want to the tables -&gt; div first, so you can see how many columns they have and if you need to set any specific widths.) It's tedious, but probably not as big a job as you're expecting. If you have added styles or other tags inside the tr and tds, it gets a lot harder. Make a backup of your files first though, in case you mess up. Welp... I do have Styles inside the &lt;tr&gt; &lt;/tr&gt; :````(
This is what I did for the checkbox... there are 11 divisions that need to be hidden/revealed (not TR... my bad). The general idea is that each division got uniquely renamed for it's psionic. "abilities" became "body-discipline" and then the name="attr_toggle-abilities" became name="attr_toggle-&lt;psionic name&gt;" But it still opens and closes ALL of the divisions, each checkbox gets checked when ONE box is ticked, etc.&nbsp; I can't find where its reference is the same that would make the checkbox line "global" like that.&nbsp; And it's only within this primary Psionics div.&nbsp; The primary tabs for the sheet works just fine too. &lt;input type="checkbox" class="tab tab4" name="attr_core-tab4" value="4" title="Skills" /&gt; &lt;span class="tab tab4" style="line-height: 40px;"&gt;Psionics&lt;/span&gt; &lt;div class="section-psionics"&gt; &lt;div class="outer-container psionics-outer-container"&gt; &lt;div class="internal-container text"&gt; &lt;span class="goldenHeading" style="line-height: 40px;"&gt;&amp;nbsp; Psionics&lt;/span&gt; &lt;tr&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt;&lt;span class="subsubheading text blue-color"&gt;Life Energy&lt;/span&gt;&lt;/td&gt; &lt;td&gt;&lt;span class="text red-color" name="attr_life_energy"/&gt;&lt;/span&gt;&lt;/td&gt; &lt;td&gt;&lt;span class="subsubheading text blue-color"&gt;Raw Energy&lt;/span&gt;&lt;/td&gt; &lt;td&gt;&lt;span class="text red-color" name="attr_raw_energy"/&gt;&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;div class="flex"&gt; &lt;!-- &lt;fieldset class="repeating_skills"&gt; --&gt; &lt;input class="sheet-body-discipline-toggle" type="hidden" name="attr_toggle-body-discipline"&gt; &lt;div class="widget sheet-section-body-discipline-hidden"&gt; &lt;div class="borderedContainer"&gt; &lt;table&gt; &lt;tr&gt; &lt;td class="skill-input green-color"&gt;&lt;input type="checkbox" name="attr_toggle-body-discipline" value="1" checked&gt; Edit&lt;/td&gt; &lt;td class="skill-name"&gt;&lt;span class="subheading"&gt;Body Discipline&lt;/span&gt;&lt;/td&gt; &lt;td class="skill-bonus"&gt;&lt;button class="blank-roll-button" type="roll" value="&amp;{template:default} {{name=Body Discipline}} {{Body Discipline=[[1d20+@{psi_body_discipline}+@{psi_Causation}+@{psi_body_discipline_misc}]]}} {{Adaptation=[[@{psi_body_discipline_adaptation}]]}} {{Adaptation Desc=@{psi_body_discipline_adaptation_desc}}} {{Immunity=[[@{psi_body_discipline_immunity}]]}} {{Immunity Desc=@{psi_body_discipline_immunity_desc}}} {{Regeneration=[[@{psi_body_discipline_regeneration}]]}} {{Regeneration Desc=@{psi_body_discipline_regeneration_desc}}} {{Boost=[[@{psi_body_discipline_boost}]]}} {{Boost Desc=@{psi_body_discipline_boost_desc}}} {{Natural Armor=[[@{psi_body_discipline_natural_armor}]]}} {{Natural Armor Desc=@{psi_body_discipline_natural_armor_desc}}} {{Mutation=[[@{psi_body_discipline_mutation}]]}} {{Mutation Desc=@{psi_body_discipline_mutation_desc}}} }}"&gt;&lt;/button&gt;&lt;/td&gt; &lt;td class="skill-name text blue-color"&gt;RE &lt;span class="text red-color" name="attr_psi_body_discipline_re"&gt;&lt;/span&gt;&lt;/td&gt; &lt;td class="skill-name text blue-color"&gt;BD &lt;span class="text red-color" name="attr_psi_body_discipline"&gt;&lt;/span&gt;&lt;/td&gt; &lt;td class="skill-name text blue-color"&gt;Attr &lt;span class="text red-color"&gt;CON&lt;/span&gt;&lt;/td&gt; &lt;td class="skill-name text blue-color"&gt;Misc &lt;span class="text red-color" name="attr_psi_body_discipline_misc"&gt;&lt;/span&gt;&lt;/td&gt; &lt;td class="skill-name text blue-color"&gt;Prog &lt;span class="text red-color" name="attr_psi_body_discipline_progression"&gt;&lt;/span&gt;&lt;/td&gt; &lt;/tr&gt; &lt;td class="skill-name text blue-color"&gt;Adapt &lt;span class="text red-color" name="attr_psi_body_discipline_adaptation"&gt;&lt;/span&gt;&lt;/td&gt; &lt;td class="skill-name text blue-color"&gt;Immun &lt;span class="text red-color" name="attr_psi_body_discipline_immunity"&gt;&lt;/span&gt;&lt;/td&gt; &lt;td class="skill-name text blue-color"&gt;Regen &lt;span class="text red-color" name="attr_psi_body_discipline_regeneration"&gt;&lt;/span&gt;&lt;/td&gt; &lt;td class="skill-name text blue-color"&gt;Boost &lt;span class="text red-color" name="attr_psi_body_discipline_boost"&gt;&lt;/span&gt;&lt;/td&gt; &lt;td class="skill-name text blue-color"&gt;Heal &lt;span class="text red-color" name="attr_psi_body_discipline_heal"&gt;&lt;/span&gt;&lt;/td&gt; &lt;td class="skill-name text blue-color"&gt;N.Ar &lt;span class="text red-color" name="attr_psi_body_discipline_natural_armor"&gt;&lt;/span&gt;&lt;/td&gt; &lt;td class="skill-name text blue-color"&gt;Muta &lt;span class="text red-color" name="attr_psi_body_discipline_mutation"&gt;&lt;/span&gt;&lt;/td&gt; &lt;td class="skill-name text blue-color"&gt;Points &lt;span class="text red-color" name="attr_psi_body_discipline_skill_points"&gt;&lt;/span&gt;&lt;/td&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="widget sheet-section-body-discipline-revealed"&gt; &lt;div class="borderedContainer"&gt; &lt;table&gt; &lt;tr&gt; &lt;td class="skill-name green-color" style="text-align:center"&gt;&lt;input type="checkbox" name="attr_toggle-body-discipline" value="1" checked&gt;Edit&lt;/td&gt; &lt;td class="skill-name blue-color" style="text-align:center"&gt;Roll&lt;/td&gt; &lt;td class="skill-name blue-color" style="text-align:center"&gt;RE&lt;/td&gt; &lt;td class="skill-name blue-color" style="text-align:center"&gt;Level&lt;/td&gt; &lt;td class="skill-name blue-color" style="text-align:center"&gt;Attribute&lt;/td&gt; &lt;td class="skill-name blue-color" style="text-align:center"&gt;Misc&lt;/td&gt; &lt;td class="skill-name blue-color" style="text-align:center"&gt;Prog.&lt;/td&gt; &lt;td class="skill-name blue-color" style="text-align:center"&gt;Points&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="subheading" style="width: auto;" name="attr_psi_body_discipline_name"/&gt;Body Discipline&lt;/td&gt; &lt;td class="skill-bonus"&gt;&lt;button class="blank-roll-button" type="roll" value="&amp;{template:default} {{name=Body Discipline}} {{Body Discipline=[[1d20+@{psi_body_discipline}+@{psi_Causation}+@{psi_body_discipline_misc}]]}} {{Adaptation=[[@{psi_body_discipline_adaptation}]]}} {{Adaptation Desc=@{psi_body_discipline_adaptation_desc}}} {{Immunity=[[@{psi_body_discipline_immunity}]]}} {{Immunity Desc=@{psi_body_discipline_immunity_desc}}} {{Regeneration=[[@{psi_body_discipline_regeneration}]]}} {{Regeneration Desc=@{psi_body_discipline_regeneration_desc}}} {{Boost=[[@{psi_body_discipline_boost}]]}} {{Boost Desc=@{psi_body_discipline_boost_desc}}} {{Natural Armor=[[@{psi_body_discipline_natural_armor}]]}} {{Natural Armor Desc=@{psi_body_discipline_natural_armor_desc}}} {{Mutation=[[@{psi_body_discipline_mutation}]]}} {{Mutation Desc=@{psi_body_discipline_mutation_desc}}} }}"&gt;&lt;/button&gt;&lt;/td&gt; &lt;td class="skill-name"&gt;&lt;input class="inputfield-abilities text" style="width: 55px; text-align: center; color:yellow-color" type="text" value="0" name="attr_psi_body_discipline_re" value="0" /&gt;&lt;/td&gt; &lt;td&gt;&lt;span class="subsubheading text red-color" name="attr_psi_body_discipline"&gt;&lt;/span&gt;&lt;/td&gt; &lt;!-- This is the level of the psionic only REFERENCED from--&gt; &lt;td class="skill-attribute"&gt; &lt;select class="inputfield" type="text" style="width: auto; margin-top:8px" name="attr_skillAttribute"&gt; &lt;option value="0" disabled hidden selected&gt;&lt;/option&gt; &lt;option value="@{strength}" style="color:white;background:#000000;"&gt;STR&lt;/option&gt; &lt;option value="@{dexterity}" style="color:white;background:#000000;"&gt;DEX&lt;/option&gt; &lt;option value="@{constitution}" style="color:white;background:#000000;"&gt;CON&lt;/option&gt; &lt;option value="@{intelligence}" style="color:white;background:#000000;"&gt;INT&lt;/option&gt; &lt;option value="@{wisdom}" style="color:white;background:#000000;"&gt;WIS&lt;/option&gt; &lt;option value="@{charisma}" style="color:white;background:#000000;"&gt;CHA&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td class="text blue-color"&gt;&lt;input class="inputfield-abilities text" style="width: 55px;" type="text" value="0" name="attr_psi_body_discipline_misc" min="0" max="999" /&gt;&lt;/td&gt; &lt;td class="skill-progression"&gt; &lt;select class="text dropdown grey" type="text" name="attr_psi_body_discipline_progression"&gt; &lt;option style="color:white;background:#000000;"&gt;1,2,3,4,5...&lt;/option&gt; &lt;option style="color:white;background:#000000;"&gt;4,5,6,7&lt;/option&gt; &lt;option style="color:white;background:#000000;"&gt;3,4,5,6&lt;/option&gt; &lt;option style="color:white;background:#000000;"&gt;2,3,4,5&lt;/option&gt; &lt;option style="color:white;background:#000000;"&gt;1,2,3,4&lt;/option&gt; &lt;option style="color:white;background:#000000;"&gt;3,3,3,3&lt;/option&gt; &lt;option style="color:white;background:#000000;"&gt;5,5,5,5&lt;/option&gt; &lt;option style="color:white;background:#000000;"&gt;10,10,10,10&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td class="text blue-color"&gt;&lt;input class="inputfield-abilities text" style="width: 55px;" type="text" value="0" name="attr_psi_body_discipline_skill_points" min="0" max="999" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="text blue-color"&gt;Adaptation&lt;/td&gt; &lt;td class="text blue-color"&gt;&lt;input class="inputfield-abilities text" style="width: 77px;" type="text" value="0" name="attr_psi_body_discipline_adaptation" /&gt;&lt;/td&gt; &lt;td class="text blue-color"&gt;Desc.&lt;/td&gt; &lt;td colspan="5"&gt; &lt;input class="inputfield-abilities" type="text" style="width:99%;" value="Missing Desc." name="attr_psi_body_discipline_adaptation_desc" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="text blue-color"&gt;Immunity&lt;/td&gt; &lt;td class="text blue-color"&gt;&lt;input class="inputfield-abilities text" style="width: 77px;" type="text" value="0" name="attr_psi_body_discipline_immunity" /&gt;&lt;/td&gt; &lt;td class="text blue-color"&gt;Desc.&lt;/td&gt; &lt;td colspan="5"&gt; &lt;input class="inputfield-abilities" type="text" style="width:99%;" value="Missing Desc." name="attr_psi_body_discipline_immunity_desc" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="text blue-color"&gt;Regeneration&lt;/td&gt; &lt;td class="text blue-color"&gt;&lt;input class="inputfield-abilities text" style="width: 77px;" type="text" value="0" name="attr_psi_body_discipline_regeneration" /&gt;&lt;/td&gt; &lt;td class="text blue-color"&gt;Desc.&lt;/td&gt; &lt;td colspan="5"&gt; &lt;input class="inputfield-abilities" type="text" style="width:99%;" value="Missing Desc." name="attr_psi_body_discipline_regeneration_desc" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="text blue-color"&gt;Boosting&lt;/td&gt; &lt;td class="text blue-color"&gt;&lt;input class="inputfield-abilities text" style="width: 77px;" type="text" value="0" name="attr_psi_body_discipline_boost" /&gt;&lt;/td&gt; &lt;td class="text blue-color"&gt;Desc.&lt;/td&gt; &lt;td colspan="5"&gt; &lt;input class="inputfield-abilities" type="text" style="width:99%;" value="Missing Desc." name="attr_psi_body_discipline_boost_desc" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="text blue-color"&gt;Self Heal&lt;/td&gt; &lt;td class="text blue-color"&gt;&lt;input class="inputfield-abilities text" style="width: 77px;" type="text" value="0" name="attr_psi_body_discipline_heal" /&gt;&lt;/td&gt; &lt;td class="text blue-color"&gt;Desc.&lt;/td&gt; &lt;td colspan="5"&gt; &lt;input class="inputfield-abilities" type="text" style="width:99%;" value="Missing Desc." name="attr_psi_body_discipline_heal_desc" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="text blue-color"&gt;Nat Armor&lt;/td&gt; &lt;td class="text blue-color"&gt;&lt;input class="inputfield-abilities text" style="width: 77px;" type="text" value="0" name="attr_psi_body_discipline_natural_armor" /&gt;&lt;/td&gt; &lt;td class="text blue-color"&gt;Desc.&lt;/td&gt; &lt;td colspan="5"&gt; &lt;input class="inputfield-abilities" type="text" style="width:99%;" value="Missing Desc." value="Missing Desc." name="attr_psi_body_discipline_natural_armor_desc" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="text blue-color"&gt;Mutation&lt;/td&gt; &lt;td class="text blue-color"&gt;&lt;input class="inputfield-abilities text" style="width: 77px;" type="text" value="0" name="attr_psi_body_discipline_mutation" /&gt;&lt;/td&gt; &lt;td class="text blue-color"&gt;Desc.&lt;/td&gt; &lt;td colspan="5"&gt; &lt;input class="inputfield-abilities" type="text" style="width:99%;" value="Missing Desc." name="attr_psi_body_discipline_mutation_desc" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; This is the CSS /* THIS IS THE PART OF THE CODE THAT HIDE AND REVEAL THE CUSTOM SKILLS SECTIONS */ /* General Abilties */ div.sheet-section-abilities-revealed { display: inline; } div.sheet-section-abilities-hidden { /* display: inline-block; */ display: none; } input.sheet-abilities-toggle[value="0"] ~ div.sheet-section-abilities-revealed { display: none; } input.sheet-abilities-toggle[value="0"] ~ div.sheet-section-abilities-hidden { display: inline; } /* BODY DISCIPLINE */ div.sheet-section-body-discipline-revealed { display: inline; } div.sheet-section-body-discipline-hidden { /* display: inline-block; */ display: none; } input.sheet-body-discipline-toggle[value="0"] ~ div.sheet-section-body-discipline-revealed { display: none; } input.sheet-body-discipline-toggle[value="0"] ~ div.sheet-section-body-discipline-hidden { display: inline; } /* CAUSATION */ div.sheet-section-causation-revealed { display: inline; } div.sheet-section-causation-hidden { /* display: inline-block; */ display: none; } input.sheet-causation-toggle[value="0"] ~ div.sheet-section-causation-revealed { display: none; } input.sheet-causation-toggle[value="0"] ~ div.sheet-section-causation-hidden { display: inline; } /* CLAIRVOYANCE */ div.sheet-section-clairvoyance-revealed { display: inline; } div.sheet-section-clairvoyance-hidden { /* display: inline-block; */ display: none; } input.sheet-clairvoyance-toggle[value="0"] ~ div.sheet-section-clairvoyance-revealed { display: none; } input.sheet-clairvoyance-toggle[value="0"] ~ div.sheet-section-clairvoyance-hidden { display: inline; } /* DEFLECTION */ div.sheet-section-deflection-revealed { display: inline; } div.sheet-section-deflection-hidden { /* display: inline-block; */ display: none; } input.sheet-deflection-toggle[value="0"] ~ div.sheet-deflection-deflection-revealed { display: none; } input.sheet-deflection-toggle[value="0"] ~ div.sheet-section-deflection-hidden { display: inline; } /* DOMINATION */ div.sheet-section-domination-revealed { display: inline; } div.sheet-section-domination-hidden { /* display: inline-block; */ display: none; } input.sheet-domination-toggle[value="0"] ~ div.sheet-section-domination-revealed { display: none; } input.sheet-domination-toggle[value="0"] ~ div.sheet-section-domination-hidden { display: inline; } /* AENERGY COMMUNION */ div.sheet-section-energy-communion-revealed { display: inline; } div.sheet-section-energy-communion-hidden { /* display: inline-block; */ display: none; } input.sheet-energy-communion-toggle[value="0"] ~ div.sheet-section-energy-communion-revealed { display: none; } input.sheet-energy-communion-toggle[value="0"] ~ div.sheet-section-energy-communion-hidden { display: inline; } /* MOLECULAR ALTERATION */ div.sheet-section-molecular-alteration-revealed { display: inline; } div.sheet-section-molecular-alteration-hidden { /* display: inline-block; */ display: none; } input.sheet-molecular-alteration-toggle[value="0"] ~ div.sheet-section-molecular-alteration-revealed { display: none; } input.sheet-molecular-alteration-toggle[value="0"] ~ div.sheet-section-molecular-alteration-hidden { display: inline; } /* PYROKINESIS */ div.sheet-section-pyrokinesis-revealed { display: inline; } div.sheet-section-pyrokinesis-hidden { /* display: inline-block; */ display: none; } input.sheet-pyrokinesis-toggle[value="0"] ~ div.sheet-section-pyrokinesis-revealed { display: none; } input.sheet-pyrokinesis-toggle[value="0"] ~ div.sheet-section-pyrokinesis-hidden { display: inline; } /* SUBATOMIC ALTERATION */ div.sheet-section-subatomic-alteration-revealed { display: inline; } div.sheet-section-subatomic-alteration-hidden { /* display: inline-block; */ display: none; } input.sheet-subatomic-alteration-toggle[value="0"] ~ div.sheet-section-subatomic-alteration-revealed { display: none; } input.sheet-abilisubatomic-alterationties-toggle[value="0"] ~ div.sheet-section-subatomic-alteration-hidden { display: inline; } /* TELEKINESIS */ div.sheet-section-telekinesis-revealed { display: inline; } div.sheet-section-telekinesis-hidden { /* display: inline-block; */ display: none; } input.sheet-telekinesis-toggle[value="0"] ~ div.sheet-section-telekinesis-revealed { display: none; } input.sheet-telekinesis-toggle[value="0"] ~ div.sheet-section-telekinesis-hidden { display: inline; } /* ANTI PSIONICS */ div.sheet-section-anti-psionics-revealed { display: inline; } div.sheet-section-anti-psionics-hidden { /* display: inline-block; */ display: none; } input.sheet-anti-psionics-toggle[value="0"] ~ div.sheet-section-anti-psionics-revealed { display: none; } input.sheet-anti-psionics-toggle[value="0"] ~ div.sheet-section-anti-psionics-hidden { display: inline; }