Shfting Radio Buttons to Action Buttons

Hello again, and apologies for how frequently I've been posting! I've arrived at yet another issue.  I'm making changes to the Fallout VnD character sheet (for a personalized version for my group), and I'm attempting to change the radio buttons that the sheet relies on for its tabs to action buttons, as I've read in multiple locations that they are easier to work with in the long run (and many in my group use Firefox, so shifting to action buttons would actually allow the tabs to render as tabs instead of check boxes). I tried multiple different ways to go about this, following other forum posts in which others were doing something similar, but the situation is this. I've added Action buttons that shift between an NPC and PC version of the sheet. These work fine, no issues to report.  However, any of the attempts I've made to shift the Radio buttons into action buttons has resulted in nothing being displayed. The buttons appear, of course, but their contents don't show at all. I got rather frustrated working on this last night and reverted everything back to its original state prior to attempting the translation from radio buttons to action buttons, so regrettably I only have the current state of those buttons to show.  Please forgive me for how everything is structured, I'm still working on learning all of this. HTML & Sheet Worker <div class="sheets">     <!--- PC/NPC Tabs ---> <input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab' value='pc' /> <button type="action" class="sheet-tabpc" name="act_pc">PC</button> <button type="action" class="sheet-tabpc" name="act_npc">NPC</button>     <div class="sheet-pc"> <!--- Radio buttons for PC tab ---> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" title="Prime" checked="checked" /> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" title="Combat" /> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3" title="Perks & Traits" /> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4" title="Inventory" /> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab5" value="5" title="Vehicles" />          <div class="sheet-tab-content sheet-tab1">             <!--- tab1 content --->         </div>         <!--- tabs 2-5 --->     </div>     <div class="sheet-npc">         <input type="radio" name="attr_tab" class="sheet-tab sheet-tab7" value="6" title="Prime" checked="checked" /> <input type="radio" name="attr_tab" class="sheet-tab sheet-tab8" value="7" title="Combat" />             <div class="sheet-tab-content sheet-tab7">             <!--- tab7 content --->         </div>         <div class="sheet-tab-content sheet-tab7">             <!--- tab7 content --->         </div>     </div> </div> <!--- Script for PC/NPC ---> <script type="text/worker"> const buttonlist = ["pc", "npc"]; buttonlist.forEach(button => { on(`clicked:${button}`, function() { setAttrs({ sheetTab: button // This updates the value of sheet-tabstoggle }); }); }); </script> CSS: /* PC/NPC Tab Settings */ .sheet-pc, .sheet-npc { display: none; } .sheet-tabstoggle[value="pc"] ~ div.sheet-pc, .sheet-tabstoggle[value="npc"] ~ .sheet-npc { display: block; } /* Tabs within PC/NPC */ input.sheet-tab1:not(:checked) ~ .sheet-tab1, input.sheet-tab2:not(:checked) ~ .sheet-tab2, input.sheet-tab3:not(:checked) ~ .sheet-tab3, input.sheet-tab4:not(:checked) ~ .sheet-tab4, input.sheet-tab5:not(:checked) ~ .sheet-tab5, input.sheet-tab6:not(:checked) ~ .sheet-tab6 { display: none; } input.sheet-tab7:not(:checked) ~ .sheet-tab7, input.sheet-tab8:not(:checked) ~ .sheet-tab8 { display: none; } I think I gathered everything relevant. As I said before, I can't seem to scrounge together the methods I attempted, at least the code for them. But from what I can recall, I attempted: - Modifying the Sheet Worker to include these other "tabs" into the buttonList constant array. This, I believe, failed because switching to one of the children would have resulted in the PC/NPC tabs not being displayed. - Adding a new script for the tabs, giving each of them their own hidden attribute. That's what I can remember.  I'm sorry to be dumping all this here.  I genuinely feel lazy for relying so much on everyone here, but I'm at my wits end with this.  It seems like it has a simple solution, but my general lack of fluency with these languages isn't lending itself well to problem solving at the moment. To anyone willing to assist, thank you, and I apologize for not being able to provide the code from the attempts.

Hi Oneiris, I haven't used the action button/sheetworker method for tabs yet so here's is my hacked attempt that seems to work.  I'm sure there's a better sheetworker method of handling the two different button types (pc, npc) and the others(tab1, tab2, tab3, etc.), but I think this should be fine. I added a little header text just to help see that things are functioning (just remove as needed).  You may need to "adjust" to make it work properly with the rest of your code, but this should get you going again. Cheers <div class="sheets"> <!--- PC/NPC Tabs ---> <input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab' value='pc' /> <input type='hidden' class='sheet-tabstoggle2' name='attr_sheetTabs' value='tab1' /> <button type="action" class="sheet-tabpc" name="act_pc">PC</button> <button type="action" class="sheet-tabpc" name="act_npc">NPC</button> <div class="sheet-pc"> <h1>PC</h1> <!--- Radio buttons for PC tab ---> <button type="action" name="act_tab1" class="sheet-tab" value="tab1" title="Prime">Prime</button> <button type="action" name="act_tab2" class="sheet-tab" value="tab2" title="Combat">Combat</button> <button type="action" name="act_tab3" class="sheet-tab" value="tab3" title="Perks & Traits">Perks & Traits</button> <button type="action" name="act_tab4" class="sheet-tab" value="tab4" title="Inventory">Inventory</button> <button type="action" name="act_tab5" class="sheet-tab" value="tab5" title="Vehicles">Vehicles</button> <div class="sheet-tab-content sheet-tab1"><h2>Page 1</h2></div> <div class="sheet-tab-content sheet-tab2"><h2>Page 2</h2></div> <div class="sheet-tab-content sheet-tab3"><h2>Page 3</h2></div> <div class="sheet-tab-content sheet-tab4"><h2>Page 4</h2></div> <div class="sheet-tab-content sheet-tab5"><h2>Page 5</h2></div> </div> <div class="sheet-npc"> <h1>NPC</h1> <button type="action" name="act_tab6" class="sheet-tab" value="tab6" title="Prime">Prime</button> <button type="action" name="act_tab7" class="sheet-tab" value="tab7" title="Combat">Combat</button> <div class="sheet-tab-content sheet-tab6"><h2>Page 6</h2></div> <div class="sheet-tab-content sheet-tab7"><h2>Page 7a</h2></div> <div class="sheet-tab-content sheet-tab7"><h2>Page 8b</h2></div> </div> </div> <!--- Script for PC/NPC ---> <script type="text/worker"> const buttonlist = ['pc', 'npc']; buttonlist.forEach((button) => { on(`clicked:${button}`, function (eventInfo) { console.log(eventInfo); setAttrs({ sheetTab: button, // This updates the value of sheet-tabstoggle }); }); }); const buttonlist2 = ['tab1', 'tab2', 'tab3', 'tab4', 'tab5', 'tab6', 'tab7', 'tab8']; buttonlist2.forEach((button2) => { on(`clicked:${button2}`, function (eventInfo) { console.log(eventInfo); setAttrs({ sheetTabs: button2, // This updates the value of sheet-tabstoggle }); }); }); </script> .sheet-pc, .sheet-npc, .sheet-tab1, .sheet-tab2, .sheet-tab3, .sheet-tab4, .sheet-tab5, .sheet-tab6, .sheet-tab7, .sheet-tab8 { display: none; } .sheet-tabstoggle[value="pc"] ~ .sheet-pc, .sheet-tabstoggle[value="npc"] ~ .sheet-npc, .sheet-tabstoggle2[value="tab1"] ~ .sheet-pc .sheet-tab1, .sheet-tabstoggle2[value="tab2"] ~ .sheet-pc .sheet-tab2, .sheet-tabstoggle2[value="tab3"] ~ .sheet-pc .sheet-tab3, .sheet-tabstoggle2[value="tab4"] ~ .sheet-pc .sheet-tab4, .sheet-tabstoggle2[value="tab5"] ~ .sheet-pc .sheet-tab5, .sheet-tabstoggle2[value="tab6"] ~ .sheet-npc .sheet-tab6, .sheet-tabstoggle2[value="tab7"] ~ .sheet-npc .sheet-tab7, .sheet-tabstoggle2[value="tab8"] ~ .sheet-npc .sheet-tab8 { display: block; }

Thank you for your response and your assistance Vince! So I obviously went and tested the code your provided, and quite obviously it worked.  I've made the appropriate changes within my own sheet to see about getting it to function there, but at present it doesn't appear to be functioning as it did alone.  The PC and NPC tabs function as they should, but somethings preventing the nested tabs from doing the same. Using the inspect function, I can see that (attr_sheetTab)'s value is shifting from pc to npc as expected, but when the tabs are clicked, (attr_sheetTab2) doesn't appear to be updating.  For now I think I'm just going to start slowly entering in my html into the test sheet until I find the roadblock I'm hitting, but this at least has me on the right track! Thank you!

It's possible the "path" (how the html is structured. ie parent, child, sibling) has changed as you back-fill the code so that the css selectors that handle hiding/showing content no longer point to the actual element (tab1, tab2, tab3, etc.) they are supposed to effect. If the structure changes from the test code, the css selectors will need to be changed to match. It's also possible to move and/or use copies of the hidden inputs to match how the css selector is structured.

Apologies for taking so long to reply! I finally managed to get it to cooperate. It ended up being something super simple in the end and just had to tweak the values in the sheet worker (that I'd put in incorrect in the first place). Your framework went swimmingly and I was able to incorporate it into even more tabs! Thank you once again for all of your help, vÍnce!

Great to hear.