Buttons Tabs Help Please :)

Okay, I have tabs that switch various pages. These are managed by buttons, and they work. We'll call these the MAIN TABS. On one of the tabs, I have another set of buttons. I would like these tabs to change which div is displayed when selected. I can't seem to get it to display when clicked. Here's my CSS and HTML /*Configure the tab buttons*/ .charsheet .sheet-body-discipline, .charsheet .sheet-causation, .charsheet .sheet-clairvoyance, .charsheet .sheet-dominiation, .charsheet .sheet-energy-communion, .charsheet .sheet-molecular-alteration, .charsheet .sheet-pyrokinesis, .charsheet .sheet-subatomic-alteration, .charsheet .sheet-telekinesis, .charsheet .sheet-anti-psionics {     display: none; } /* show the selected tab */ .charsheet .sheet-tabstoggle1[value="body-discipline"] ~ div.sheet-body-discipline, .charsheet .sheet-tabstoggle1[value="causation"] ~ div.sheet-causation, .charsheet .sheet-tabstoggle1[value="clairvoyance"] ~ div.sheet-clairvoyance, .charsheet .sheet-tabstoggle1[value="deflection"] ~ div.sheet-deflection, .charsheet .sheet-tabstoggle1[value="domination"] ~ div.sheet-domination, .charsheet .sheet-tabstoggle1[value="energy-communion"] ~ div.sheet-energy-communion, .charsheet .sheet-tabstoggle1[value="molecular-alteration"] ~ div.sheet-molecular-alteration, .charsheet .sheet-tabstoggle1[value="pyrokinesis"] ~ div.sheet-pyrokinesis, .charsheet .sheet-tabstoggle1[value="subatomic-alteration"] ~ div.sheet-subatomic-alteration, .charsheet .sheet-tabstoggle1[value="telekinesis"] ~ div.sheet-telekinesis, .charsheet .sheet-tabstoggle1[value="anti-psionics"] ~ div.sheet-anti-psionics {     display: block; } /* START OF PSIONICS EDIT PAGE */ .charsheet .sheet-edit-psionics-grid-section{     display: grid;     grid-gap: 5px;     grid-template-columns:  100%;     max-width:  825px;     grid-template-rows: auto auto auto;     grid-template-areas:     "life-energy life-energy life-energy life-energy"     "psi-buttons psi-buttons psi-buttons psi-buttons"     "edit-psionics edit-psionics edit-psionics edit-psionics"   } div.edit-life-energy {     grid-area: life-energy;     grid-template-columns: 3.5em 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;         grid-auto-rows: 25px;     grid-gap: 1em;         font-size: large; } div.edit-psi-bd h3{   grid-area: edit-psionics;   grid-template-columns: auto;   grid-columns: 1 / 4;   grid-auto-rows: 25px;   grid-gap: 5px;   font-size: large;   text-align: center; } div.edit-psi-buttons {         grid-area: psi-buttons;     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;     max-width: 600px;             grid-auto-rows: 28px;     grid-gap: 5px;     padding-left: 13em;             } div.psionics-buttons h3 {     grid-column: 1 / -1;         text-align: center;     grid-row: 1;     } div.edit-psi {       grid-area: edit-psionics;   grid-template-columns: 3.5em 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;       grid-auto-rows: 25px;   grid-gap: 1em;       font-size: large;     } div.sheet-psionics h3 {     grid-column: 1 / -1;         text-align: center;     grid-row: 1;     } //////////////////////////// HTML ////////////////////////  <div class="sheet-editpsionics">     <h3 style="grid-column: 1 / -1; text-align:center; padding-top: 10px;">PSIONICS EDIT PAGE</h3>     <!-- PAGE HEADER BELOW BUTTONS -->               <!-- Add your HTML HERE -->          <div class="sheet-edit-psionics-grid-section">                                   <div class="sheet-block edit-life-energy" style="text-align: center;">                                 <h3 style="grid-column: 1 / -1; padding-top: 5px;">LIFE CORD</h3>                 <span class="sheet-blue-color" >Life Energy</span class="sheet-blue-color" />                 <input class="sheet-inputfieldlc sheet-blue-color" title="Your Current Life Energy" type="number" name="attr_life_energy" value="attr_life_energy" style="width:5em;" />                 <span class="sheet-red-color">/</span>                                 <input class="sheet-inputfieldlc sheet-blue-color" title="Your Maximum Life Energy" type="number" name="attr_life_energy_full" value="" style="width:5em;" />                 <input class="sheet-inputfield52" style="background-color: #282828; border:#282828" disabled>                 <span class="sheet-blue-color" >RE</span>                 <input class="sheet-inputfieldlc sheet-blue-color" title="Your Current Raw Energy Output" type="number" name="attr_raw_energy" value="floor(@{life_energy} / 100)" disabled />                                                 <input class="sheet-inputfieldlc sheet-blue-color" title="Your Sphere of Influence" type="number" name="attr_sphere_of_influence" value="floor((@{life_energy} / 100)+3)" disabled />                 <span class="sheet-blue-color" >Sphere</span>                 <input class="sheet-inputfield52" style="background-color: #282828; border:#282828" disabled>                 <span class="sheet-blue-color" >Regen %</span class="sheet-blue-color" />                 <input class="sheet-inputfieldlc sheet-blue-color" title="Percentage your LC regenerates (of max)" type="number" name="attr_life_energy_regen_percent" value="10" />                                                                                 <input class="sheet-inputfieldlc sheet-blue-color" title="Actual Life Energy per day" type="number" name="attr_life_energy_regenerated" value="(@{life_energy_full}/100)*(@{life_energy_regen_percent})" disabled />                 <span class="sheet-blue-color" >/day</span class="sheet-blue-color" />             </div>                                 <div class="edit-psi-buttons">                           <input type="hidden" class="sheet-tabstoggle1" name="attr_psiTab"  value="causation" />                                                   <div>                     <button class="sheet-button-roll2" type="action" name="act_body-discipline" >Body Disc</button>                               <button class="sheet-button-roll2" type="action" name="act_causation" >Causation</button>                     <button class="sheet-button-roll2" type="action" name="act_clairvoyance" >Clairvoyance</button>                     <button class="sheet-button-roll2" type="action" name="act_deflection" >Deflection</button>                     <button class="sheet-button-roll2" type="action" name="act_domination" >Domination</button>                       <button class="sheet-button-roll2" type="action" name="act_energy-communion" >Energy</button>                                               <button class="sheet-button-roll2" type="action" name="act_molecular-alteration" >Molecular</button>                     <button class="sheet-button-roll2" type="action" name="act_pyrokinesis" >Pyrokinesis</button>                     <button class="sheet-button-roll2" type="action" name="act_subatomic-alteration" >Subatomic</button>                     <button class="sheet-button-roll2" type="action" name="act_telekinesis" >Telekinesis</button>                       <button class="sheet-button-roll2" type="action" name="act_anti-psionics" >Anti Psi</button>                   </div>             </div>             <div class="edit-psi sheet-block">                 <span class="sheet-gold-color"> Body Discipline</span>                 <div class="sheet-body-discipline sheet-block">                     <span class="sheet-gold-color"> Body Discipline</span>                 </div>                 <div class="sheet-causation sheet-block">                     <span class="sheet-gold-color"> Causation </span>                 </div>             </div>     </div> </div>   <script type="text/worker">     const buttonlist = ["body-discipline","causation","clairvoyance","deflection","domination","energy-communion","molecular-alteration","pyrokinesis","subatomic-alteration","telekinesis","anti-psionics"];     buttonlist.forEach(button => {         on(`clicked:${button}`, function() {             setAttrs({                 psiTab: button             });         });     });

You use the sibling (~) combinator to select the activated divs, but these divs are not siblings of the the input. .charsheet .sheet-tabstoggle1[value="body-discipline"] ~ div.sheet-body-discipline, For your selectors to works you would need to put the input inside&nbsp; &lt;div class="edit-psi sheet-block"&gt;. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#combinators" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#combinators</a>

OMFG.&nbsp; I fixed it by accident. I have two sets of buttons. I copied and pasted the first sheetworker script, and renamed the variables for the buttonlist. But I never named the variable "buttonlist" I thought it was self contained in each snippet.&nbsp; OMFG. I KNEW it was something simple, but totally out of my periphery. I KNEW IT. &nbsp; &nbsp; const&nbsp; buttonlist&nbsp; = ["character","equipped","editskills","inventory","editcharacter","editpsionics"]; &nbsp; &nbsp;&nbsp; buttonlis t.forEach(button =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; on(`clicked:${button}`, function() { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sheetTab: button &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; }); /* This controls the button functions to switch Psionic tabs */ &nbsp; &nbsp; const&nbsp; psibuttonlist&nbsp; = ["body-discipline","causation","clairvoyance","deflection","domination","energy-communion","molecular-alteration","pyrokinesis","subatomic-alteration","telekinesis","anti-psionics"]; &nbsp; &nbsp;&nbsp; psibuttonlist .forEach(button =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; on(`clicked:${button}`, function() { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; psiTab: button &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; }); IDispatch &nbsp;said: You use the sibling (~) combinator to select the activated divs, but these divs are not siblings of the the input. .charsheet .sheet-tabstoggle1[value="body-discipline"] ~ div.sheet-body-discipline, For your selectors to works you would need to put the input inside&nbsp; &lt;div class="edit-psi sheet-block"&gt;. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#combinators" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#combinators</a>

The problem was in the script/textworker. I had copied and pasted it, and the defined buttonlist I thought was self contained, like a command. But it turns out it's just a named variable. &nbsp; &nbsp; const buttonlist = [ " character " , " equipped " , " editskills " , " inventory " , " editcharacter " , " editpsionics " ] ; &nbsp; &nbsp; buttonlist . forEach ( button =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; on ( ` clicked: ${ button }` , function () { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs ( { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sheetTab : button &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } ) ; &nbsp; &nbsp; &nbsp; &nbsp; } ) ; &nbsp; &nbsp; } ) ; /* This controls the button functions to switch Psionic tabs */ &nbsp; &nbsp; const psibuttonlist = [ " body-discipline " , " causation " , " clairvoyance " , " deflection " , " domination " , " energy-communion " , " molecular-alteration " , " pyrokinesis " , " subatomic-alteration " , " telekinesis " , " anti-psionics " ] ; &nbsp; &nbsp; psibuttonlist . forEach ( button =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; on ( ` clicked: ${ button }` , function () { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs ( { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; psiTab : button &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } ) ; &nbsp; &nbsp; &nbsp; &nbsp; } ) ; &nbsp; &nbsp; } ) ;

Okay, now that I have the buttons working... I'm noticing they are operating very strangely. What the button displays is strange... It should display only what the button refers to, one psionic at a time. Instead it's displaying multiple... And then when you click through the buttons, what is displays varies strangely. CSS: /*Configure the tab buttons*/ .sheet-body-discipline, .sheet-causation, .sheet-clairvoyance, .sheet-dominiation, .sheet-energy-communion, .sheet-molecular-alteration, .sheet-pyrokinesis, .sheet-subatomic-alteration, .sheet-telekinesis, .sheet-anti-psionics { &nbsp; &nbsp; display: none; } /* show the selected tab */ .sheet-tabstoggle1[value="body-discipline"] ~ div.sheet-body-discipline, .sheet-tabstoggle1[value="causation"] ~ div.sheet-causation, .sheet-tabstoggle1[value="clairvoyance"] ~ div.sheet-clairvoyance, .sheet-tabstoggle1[value="deflection"] ~ div.sheet-deflection, .sheet-tabstoggle1[value="domination"] ~ div.sheet-domination, .sheet-tabstoggle1[value="energy-communion"] ~ div.sheet-energy-communion, .sheet-tabstoggle1[value="molecular-alteration"] ~ div.sheet-molecular-alteration, .sheet-tabstoggle1[value="pyrokinesis"] ~ div.sheet-pyrokinesis, .sheet-tabstoggle1[value="subatomic-alteration"] ~ div.sheet-subatomic-alteration, .sheet-tabstoggle1[value="telekinesis"] ~ div.sheet-telekinesis, .sheet-tabstoggle1[value="anti-psionics"] ~ div.sheet-anti-psionics { &nbsp; &nbsp; display: block; } HTML &nbsp;&lt;div class="edit-psi-buttons"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="hidden" class="sheet-tabstoggle1" name="attr_psiTab" &nbsp;value="causation" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="sheet-button-roll2" type="action" name="act_body-discipline" &gt;Body Disc&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="sheet-button-roll2" type="action" name="act_causation" &gt;Causation&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="sheet-button-roll2" type="action" name="act_clairvoyance" &gt;Clairvoyance&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="sheet-button-roll2" type="action" name="act_deflection" &gt;Deflection&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="sheet-button-roll2" type="action" name="act_domination" &gt;Domination&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="sheet-button-roll2" type="action" name="act_energy-communion" &gt;E.Comm&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="sheet-button-roll2" type="action" name="act_molecular-alteration" &gt;Molecular&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="sheet-button-roll2" type="action" name="act_pyrokinesis" &gt;Pyrokinesis&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="sheet-button-roll2" type="action" name="act_subatomic-alteration" &gt;Subatomic&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="sheet-button-roll2" type="action" name="act_telekinesis" &gt;Telekinesis&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="sheet-button-roll2" type="action" name="act_anti-psionics" &gt;Anti Psi&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="edit-psi sheet-block"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="hidden" class="sheet-tabstoggle1" name="attr_psiTab" &nbsp;value="body-discipline" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-body-discipline"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="sheet-gold-color"&gt; Body Discipline 123 &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-causation"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="sheet-gold-color"&gt; Causation 123 &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-clairvoyance"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="sheet-gold-color"&gt; Clairvoyance 123&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-deflection"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="sheet-gold-color"&gt; Deflection 123 &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-domination"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="sheet-gold-color"&gt; Domination 123 &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-energy-communion"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="sheet-gold-color"&gt; Energy Communion 123 &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-molecular-alteration"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="sheet-gold-color"&gt; Molecular Alteration 123 &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-pyrokinesis"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="sheet-gold-color"&gt; Pyrokinesis 123 &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-subatomic-alteration"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="sheet-gold-color"&gt; Subatomic Alteration 123 &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-telekinesis"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="sheet-gold-color"&gt; Telekinesis 123 &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-anti-psionics"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="sheet-gold-color"&gt; Anti Psionics 123 &lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; const psibuttonlist = [ " body-discipline " , " causation " , " clairvoyance " , " deflection " , " domination " , " energy-communion " , " molecular-alteration " , " pyrokinesis " , " subatomic-alteration " , " telekinesis " , " anti-psionics " ] ; &nbsp; &nbsp; psibuttonlist . forEach ( button =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; on ( ` clicked: ${ button }` , function () { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs ( { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; psiTab : button &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } ) ; &nbsp; &nbsp; &nbsp; &nbsp; } ) ; &nbsp; &nbsp; } ) ;

You still have &lt;input type="hidden" class="sheet-tabstoggle1" name="attr_psiTab" &nbsp;value="causation" /&gt; in the top div which shouldn't be there, but I don't see how it would break things. When you inspect each element in the browser you should see what class is actually applied and through which selector. Do you see ".sheet-tabstoggle1[value="xxxxxx"] ~ div.sheet-xxxxx" for each visible psionic? What is actually applying the display:block attribute?

Believe it or not, Scott found the problem.&nbsp; In the CSS I had a typo in Domination entry and a whole psionic missing.&nbsp; This was a derp moment for me =/ IDispatch said: You still have &lt;input type="hidden" class="sheet-tabstoggle1" name="attr_psiTab" &nbsp;value="causation" /&gt; in the top div which shouldn't be there, but I don't see how it would break things. When you inspect each element in the browser you should see what class is actually applied and through which selector. Do you see ".sheet-tabstoggle1[value="xxxxxx"] ~ div.sheet-xxxxx" for each visible psionic? What is actually applying the display:block attribute?