[Help Wanted] SheetWorks Button Nav Tags and Repeating Sections

There is an issue I've been struggling with for about two days, I have a tabbed navigation system I've been trying to get to work with the button tabs, however I want the tabs to be highlighted when the relevant tab is active.  I also would like to use the same navigational tabs to show/hide sections within a repeating_section.  If someone could give me like a basic example of how to do this using repeating sections, it would be very much appreciated. My tabbed navigation code: HTML: <input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab"  value="character"  /> <div>     <button type="action" name="act_core">Core </button>     <button type="action" name="act_gear">Gear </button>     <button type="action" name="act_advancements">Advancements</button>     <button type="action" name="act_npc">NPCS </button> </div> CSS: /*Configure the tab buttons*/ .charsheet .sheet-section-core, .charsheet .sheet-section-gear, .charsheet .sheet-section-advancements, .charsheet .sheet-section-npc {     display: none; } /* show the selected tab */ .charsheet .sheet-tabstoggle[value="core"]          ~ div.sheet-section-core, .charsheet .sheet-tabstoggle[value="gear"]          ~ div.sheet-section-gear, .charsheet .sheet-tabstoggle[value="advancements"]  ~ div.sheet-section-advancements, .charsheet .sheet-tabstoggle[value="npc"]           ~ div.sheet-section-npc {     display: block; }  Sheet Workers: <script type="text/worker">     const buttonlist = ["core","gear","advancements", "npc", "…"];     buttonlist.forEach(button => {         on(`clicked:${button}`, function() {             setAttrs({                 sheetTab: button             });         });     }); </script> I am hoping to use the similar code as above, to do this inside of repeating sections. Also have two other small questions, the first is, currently the bane of my existence is trying to determine a css style's hierarchy on the page for making styles that actually function.  Is there a reliable way to find this using the browser inspect or any other tool?  Second, does anyone know a good reference or cheat-sheet for updating from the legacy styles to the more modern versions used by r20?

You just need to extend the effect of the attribute value deeper into your CSS. There's three ways to do this. Add the drill down to your CSS. This method requires the least amount of code, but it will also have the biggest performance impact on the sheet as the CSS renderer will need to parse through every div that is a child of a div that is being displayed. Assuming that the sections you want to target in the repeating section are using the same target classes as your overall sections, the CSS code to do this would look like: /* show the selected tab */ .charsheet .sheet-tabstoggle[value="core"] ~ div.sheet-section-core, .charsheet .sheet-tabstoggle[value="core"] ~ div div.sheet-section-core, .charsheet .sheet-tabstoggle[value="gear"] ~ div.sheet-section-gear, .charsheet .sheet-tabstoggle[value="gear"] ~ div div.sheet-section-core, .charsheet .sheet-tabstoggle[value="advancements"] ~ div.sheet-section-advancements, .charsheet .sheet-tabstoggle[value="advancements"] ~ div div.sheet-section-core, .charsheet .sheet-tabstoggle[value="npc"] ~ div.sheet-section-npc, .charsheet .sheet-tabstoggle[value="npc"] ~ div div.sheet-section-core { display: block; } Replicate the hidden sheetTab input right before each of the repeating sections that you need to conditionally display items in and add some drill down to your CSS. This method will be more performant than option 1, but does require slightly more html code. The html code would look like this: <!--HTML--> <input type="hidden" name="attr_sheetTab" value="character"> <!--It's essential that this have the same default value as the version of the attribute at the top of the document--> <fieldset class="repeating_somesection"> <!--Your section code here with the sections that need to be conditionally displayed--> </fieldset> /*CSS*/ /* show the selected tab */ .charsheet .sheet-tabstoggle[value="core"] ~ div.sheet-section-core, .charsheet .sheet-tabstoggle[value="core"] ~ .repcontainer div.sheet-section-core, .charsheet .sheet-tabstoggle[value="gear"] ~ div.sheet-section-gear, .charsheet .sheet-tabstoggle[value="gear"] ~ .repcontainer div.sheet-section-core, .charsheet .sheet-tabstoggle[value="advancements"] ~ div.sheet-section-advancements, .charsheet .sheet-tabstoggle[value="advancements"] ~ .repcontainer div.sheet-section-core, .charsheet .sheet-tabstoggle[value="npc"] ~ div.sheet-section-npc, .charsheet .sheet-tabstoggle[value="npc"] ~ .repcontainer div.sheet-section-core { display: block; } The third option is to simply replicate each repeating section within the individual divs that are being conditionally displayed, but only put the sections that are needed for that section in. This is probably the most performant option, but it's also the option with the most code bloat.

I'm not sure this is what I am looking for.  I want to add an onClick state change to the background color of the navigation tab AND I want to create a tab-based navigation system inside a repeating section.  From what I can see of the code you posted.  It would simply show/hide a section INSIDE a repeating based on the state of the tab navigation on the outside of the repeating section.  Which, is an awsome idea for sorting things like spell levels or different types of weapons (melee vs ranged).  But not what I want here and now. The code I linked was just a sample of the effect I wanted Inside the repeating section.  Also, wouldnt the SheetWorkers code be different if it were to be inside of a repeating section anyway?  I am sorry if my wording was confused, or if I was unclear. <fieldset class="repeating_somesection"> <div> <button type="action" name="act_core">Advanced Options </button> <button type="action" name="act_core">Advanced Options xx </button> </div> <!--Your section code here with the sections that need to be conditionally displayed--> </fieldset>

Ah, I misunderstood what you were after. The tabbed navigation works pretty much the same in the repeating section. The HTML and CSS is identical other than the HTML being inside the repeating section and needing to choose a different attribute name for the repeating version of sheetTab. You could do it via sheetworker, but I might just recommend using the old pseudo-tab method. It'll be a lot simpler and more streamlined. That'd be a solely html/css method, and the CSS would be exactly like what you have now. The HTML would look like: <fieldset class="repeating_tabs"> <input class="tabstoggle" type="hidden" name="active_tab" value="tab-1"> <label class="tab-styled--tab-1"> <span>Tab 1</span> <input type="radio" name="attr_active_tab" value="tab-1" checked hidden> </label> <label class="tab-styled--tab-2"> <span>Tab 2</span> <input type="radio" name="attr_active_tab" value="tab-2" checked hidden> </label> <label class="tab-styled--tab-3"> <span>Tab 3</span> <input type="radio" name="attr_active_tab" value="tab-3" checked hidden> </label> <div class="section-tab-1"> Here's tab 1 </div> <div class="section-tab-2"> Here's tab 2 </div> <div class="section-tab-3"> Here's tab 3 </div> </fieldset> To highlight the tabs whether in the repeating section or out of it, you just need to target them like you are the sections that are being displayed. Notice the tab-styled--tab-X  class that I applied to each of the labels in that html. We'll style them like so: .charsheet .tabstoggle[value="tab-1"] ~ .tab-styled--tab-1, .charsheet .tabstoggle[value="tab-1"] ~ .tab-styled--tab-1 span, .charsheet .tabstoggle[value="tab-2"] ~ .tab-styled--tab-2, .charsheet .tabstoggle[value="tab-2"] ~ .tab-styled--tab-2 span, .charsheet .tabstoggle[value="tab-3"] ~ .tab-styled--tab-3, .charsheet .tabstoggle[value="tab-3"] ~ .tab-styled--tab-3 span{ background-color:darkblue; color:white; }

Hmm.. The code didnt work.  Is this something that work with legacy?  Cause I noticed you didnt use the ".sheet-" prepend in the css.  Also, the reason I wanted to use the button version is because I wanted like 3 lines of code instead of line 12 lines just dedicated to the navigation buttons, not to mention getting the span to line up properly with the input is always a massive pain in my neck.

Ah, yeah, I just forgot the sheets prepend. Add that and it should work. Putting the input and span in a label and hiding the input means you don't have to worry about lining them up. As for sheetworker vs this method, it's probably a wash as far as amount of code.