Second set of tabs

I've got one set of tabs on a sheet working fine: <input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab"  value="st"  />             <div> <button type="action" name="act_st" style="background-color:#333333; color:#FFC90E; width:130px;" >Stats</button> <button type="action" name="act_ge" style="background-color:#333333; color:#FFC90E; width:130px;" >Gear</button> <button type="action" name="act_ab" style="background-color:#333333; color:#FFC90E; width:130px;" >Abilities</button> <button type="action" name="act_xp" style="background-color:#333333; color:#FFC90E; width:130px;" >XP</button> </div>       <div class="sheet-st">Stats content</div>      <div class="sheet-ge">Gear content</div>        <div class="sheet-ab">Abilities content</div>        <div class="sheet-xp">XP content</div>    <script type="text/worker"> const buttonlist = ["st","ge","ab","xp"]; buttonlist.forEach(button => {     on(`clicked:${button}`, function() {         setAttrs({             sheetTab: button         });     }); }); </script> /*Configure the tab buttons*/ .charsheet .sheet-st, .charsheet .sheet-ge, .charsheet .sheet-ab, .charsheet .sheet-xp { display: none; } /* show the selected tab */ .charsheet .sheet-tabstoggle[value="st"] ~ div.sheet-st, .charsheet .sheet-tabstoggle[value="ge"] ~ div.sheet-ge, .charsheet .sheet-tabstoggle[value="ab"] ~ div.sheet-ab, .charsheet .sheet-tabstoggle[value="xp"] ~ div.sheet-xp { display: inline; } How would I go about adding a second set of tabs that functions independently of this first set?

Figured it out. For anyone interested: <input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab"  value="st"  />             <div> <button type="action" name="act_st" style="background-color:#333333; color:#FFC90E; width:130px;" >Stats</button> <button type="action" name="act_ge" style="background-color:#333333; color:#FFC90E; width:130px;" >Gear</button> <button type="action" name="act_ab" style="background-color:#333333; color:#FFC90E; width:130px;" >Abilities</button> <button type="action" name="act_xp" style="background-color:#333333; color:#FFC90E; width:130px;" >XP</button> </div>       <div class="sheet-st">Stats content</div>      <div class="sheet-ge">Gear content</div>        <div class="sheet-ab">Abilities content</div>        <div class="sheet-xp">XP content</div>  <input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab2"  value="st2"  />             <div> <button type="action" name="act_st2" style="background-color:#333333; color:#FFC90E; width:130px;" >Stats2</button> <button type="action" name="act_ge2" style="background-color:#333333; color:#FFC90E; width:130px;" >Gear2</button> <button type="action" name="act_ab2" style="background-color:#333333; color:#FFC90E; width:130px;" >Abilities2</button> <button type="action" name="act_xp2" style="background-color:#333333; color:#FFC90E; width:130px;" >XP2</button> </div>       <div class="sheet-st2">Stats2 content</div>      <div class="sheet-ge2">Gear2 content</div>        <div class="sheet-ab2">Abilities2 content</div>        <div class="sheet-xp2">XP2 content</div>    <script type="text/worker"> const buttonlist = ["st","ge","ab","xp","st2","ge2","ab2","xp2"]; buttonlist.forEach(button => {     on(`clicked:${button}`, function() {         setAttrs({             sheetTab: button,             sheetTab2: button         });     }); }); </script> /*Configure the tab buttons*/ .charsheet .sheet-st, .charsheet .sheet-ge, .charsheet .sheet-ab, .charsheet .sheet-xp, .charsheet .sheet-st2, .charsheet .sheet-ge2, .charsheet .sheet-ab2, .charsheet .sheet-xp2 { display: none; } /* show the selected tab */ .charsheet .sheet-tabstoggle[value="st"] ~ div.sheet-st, .charsheet .sheet-tabstoggle[value="ge"] ~ div.sheet-ge, .charsheet .sheet-tabstoggle[value="ab"] ~ div.sheet-ab, .charsheet .sheet-tabstoggle[value="xp"] ~ div.sheet-xp, .charsheet .sheet-tabstoggle[value="st2"] ~ div.sheet-st2, .charsheet .sheet-tabstoggle[value="ge2"] ~ div.sheet-ge2, .charsheet .sheet-tabstoggle[value="ab2"] ~ div.sheet-ab2, .charsheet .sheet-tabstoggle[value="xp2"] ~ div.sheet-xp2 { display: inline; }

Glad you figured it out. I'd recomment using longer names, act_ab could be act_abilities for example. Using descriptive names makes it easier to read and maintain your code later.

Agreed. It's a really helpful example, thank you, but it would be so much easier to understand if you have meaningful names for the tabs / buttons.