Make a hideable button INSIDE of a header

<div>Advanced Statistics Show Advanced Statistics <input type="checkbox" title="status-show" name="attr_status-show" value="1" style="opacity: 1 ; width: 16px ; height: 16px ; position: relative ; top: 0px ; left: 0px ; margin: 0px ; cursor: pointer ; z-index: 1"><span></span></div> <div> <label></label><table border="1" style="width: 100%"> <tbody><tr><td></td><td>Spec</td><td>Base</td><td>Bonus</td><td>Penalty</td><td>Total</td><td></td><td>Spec</td><td>Base</td><td>Bonus</td><td>Penalty</td><td>Total</td></tr> <tr> <td><label>Agility</label> </td><td><input style="width: 13px" type="checkbox" name="attr_AgSpec" value="2"> </td><td><input style="width: 30px" type="text" name="attr_Agility_Base" value="5"> </td><td><input style="width: 30px" type="text" name="attr_Agility_Bonus" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Agility_Penalty" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Agility_Total" value="@{Agility_Base}+@{Agility_Bonus}+@{agi_bonus_1}+@{agi_bonus_2}-@{Agility_Penalty}-@{agi_penalty_1}-@{agi_penalty_2}" disabled/> </td><td><label>Durability</label> </td><td><input style="width: 13px" type="checkbox" name="attr_DuSpec" value="1"> </td><td><input style="width: 30px" type="text" name="attr_Durability_Base" value="5"> </td><td><input style="width: 30px" type="text" name="attr_Durability_Bonus" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Durability_Penalty" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Durability_Total" value="@{Durability_Base}+@{Durability_Bonus}+@{dur_bonus_1}+@{dur_bonus_2}-@{Durability_Penalty}-@{dur_penalty_1}-@{dur_penalty_2}" disabled="" data-formula="@{Durability_Base}+@{Durability_Bonus}+@{dur_bonus_1}+@{dur_bonus_2}-@{Durability_Penalty}-@{dur_penalty_1}-@{dur_penalty_2}"> </td> </tr> <tr> <td><label>Vigor</label> </td><td><input style="width: 13px" type="checkbox" name="attr_ViSpec" value="1"> </td><td><input style="width: 30px" type="text" name="attr_Vigor_Base" value="5"> </td><td><input style="width: 30px" type="text" name="attr_Vigor_Bonus" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Vigor_Penalty" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Vigor_Total" value="@{Vigor_Base}+@{Vigor_Bonus}+@{vig_bonus_1}+@{vig_bonus_2}-@{Vigor_Penalty}-@{vig_penalty_1}-@{vig_penalty_2}" disabled="" data-formula="@{Vigor_Base}+@{Vigor_Bonus}+@{vig_bonus_1}+@{vig_bonus_2}-@{Vigor_Penalty}-@{vig_penalty_1}-@{vig_penalty_2}"> </td><td><label>Advantage</label> </td><td><input style="width: 13px" type="checkbox" name="attr_AdSpec" value="1"> </td><td><input style="width: 30px" type="text" name="attr_Advantage_Base" value="5"> </td><td><input style="width: 30px" type="text" name="attr_Advantage_Bonus" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Advantage_Penalty" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Advantage_Total" value="@{Advantage_Base}+@{Advantage_Bonus}+@{adv_bonus_1}+@{adv_bonus_2}-@{Advantage_Penalty}-@{adv_penalty_1}-@{adv_penalty_2}" disabled="" data-formula="@{Advantage_Base}+@{Advantage_Bonus}+@{adv_bonus_1}+@{adv_bonus_2}-@{Advantage_Penalty}-@{adv_penalty_1}-@{adv_penalty_2}"> </td> </tr> <tr> <td><label>Nimbleness</label> </td><td><input style="width: 13px" type="checkbox" name="attr_NiSpec" value="1"> </td><td><input style="width: 30px" type="text" name="attr_Nimbleness_Base" value="5"> </td><td><input style="width: 30px" type="text" name="attr_Nimbleness_Bonus" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Nimbleness_Penalty" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Nimbleness_Total" value="@{Nimbleness_Base}+@{Nimbleness_Bonus}+@{nim_bonus_1}+@{nim_bonus_2}-@{Nimbleness_Penalty}-@{nim_penalty_1}-@{nim_penalty_2}" disabled="" data-formula="@{Nimbleness_Base}+@{Nimbleness_Bonus}+@{nim_bonus_1}+@{nim_bonus_2}-@{Nimbleness_Penalty}-@{nim_penalty_1}-@{nim_penalty_2}"> </td><td><label>Comprehension</label> </td><td><input style="width: 13px" type="checkbox" name="attr_CoSpec" value="1"> </td><td><input style="width: 30px" type="text" name="attr_Comprehension_Base" value="5"> </td><td><input style="width: 30px" type="text" name="attr_Comprehension_Bonus" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Comprehension_Penalty" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Comprehension_Total" value="@{Comprehension_Base}+@{Comprehension_Bonus}+@{com_bonus_1}+@{com_bonus_2}-@{Comprehension_Penalty}-@{com_penalty_1}-@{com_penalty_2}" disabled="" data-formula="@{Comprehension_Base}+@{Comprehension_Bonus}+@{com_bonus_1}+@{com_bonus_2}-@{Comprehension_Penalty}-@{com_penalty_1}-@{com_penalty_2}"> </td> </tr> <tr> <td><label>Essence</label> </td><td><input style="width: 13px" type="checkbox" name="attr_EsSpec" value="1"> </td><td><input style="width: 30px" type="text" name="attr_Essence_Base" value="5"> </td><td><input style="width: 30px" type="text" name="attr_Essence_Bonus" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Essence_Penalty" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Essence_Total" value="@{Essence_Base}+@{Essence_Bonus}+@{ess_bonus_1}+@{ess_bonus_2}-@{Essence_Penalty}" disabled="" data-formula="@{Essence_Base}+@{Essence_Bonus}+@{ess_bonus_1}+@{ess_bonus_2}-@{Essence_Penalty}"> </td><td><label>Discernment</label> </td><td><input style="width: 13px" type="checkbox" name="attr_DiSpec" value="1"> </td><td><input style="width: 30px" type="text" name="attr_Discernment_Base" value="5"> </td><td><input style="width: 30px" type="text" name="attr_Discernment_Bonus" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Discernment_Penalty" value="0"> </td><td><input style="width: 30px" type="text" name="attr_Discernment_Total" value="@{Discernment_Base}+@{Discernment_Bonus}+@{dis_bonus_1}+@{dis_bonus_2}-@{Discernment_Penalty}-@{dis_penalty_1}-@{dis_penalty_2}" disabled="" data-formula="@{Discernment_Base}+@{Discernment_Bonus}+@{dis_bonus_1}+@{dis_bonus_2}-@{Discernment_Penalty}-@{dis_penalty_1}-@{dis_penalty_2}"> </td> </tr> </tbody></table> </div> This is my current code, I am trying to hide the hidebutton in the header to make things look better, but so far, I can either get the button to not function, or for it to function but for the table to try and open in the header as well... Anyone have any idea?

I saw Dylan do something like this by creating a fake checkbox that displays over a hidden one, so you can make the fake one look like whatever you want. Not sure if that helps, but check out the old AD&D 2E css on github.

Thanks I will take a look, I got it to reposition itself by using the position:relative, but that farked up the position of the hidden item as well

NVM, I got this to work with a very complicated code. feel free to PM me if you need this as well :D