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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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;
}
