Swap/hide in repeating section

I am trying to create a repeating skill section where the skills can be locked. I got the following to work outside of a fieldset: <input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab'  value='unlocked'  /> <div class='sheet-unlocked'>     <button type="action" name="act_locked" class="lock-button" >)</button>     <span>         unlocked stuff     </span> </div> <div class='sheet-locked'>     <button type="action" name="act_unlocked" class="lock-button" >(</button>     <span>locked Stuff Goes here</span>  </div> with css: .sheet-unlocked, .sheet-locked { display: none; } /* show the selected tab */ .sheet-tabstoggle[value="unlocked"] ~ div.sheet-unlocked, .sheet-tabstoggle[value="locked"] ~ div.sheet-locked { display: flex; } .sheet-lock-button{     font-family:pictos;     font-size:16px;     width:16px; } If I put this inside a fieldset it stops working. How do I make this work?

normally you can copy CSS tricks from outside a repeating section to inside with no issue. The problem is likely your sheet worker code that responds to the buttons. Buttons (and attributes) have different names when inside a repeating section. Can you post the sheet worker? 

Stole this example and modified it: < div > < button type = "action" name = "act_character" > Character < /button > < button type = "action" name = "act_journal" > Journal < /button > < button type = "action" name = "act_configuration" > Configuration < /button > < /div > < input type = 'hidden' class = 'sheet-tabstoggle' name = 'attr_sheetTab' value = 'character' / > < div class = 'sheet-character' > < h2 > Character < /h2 > < span > character Stuff Goes here < /span > < /div > < div class = 'sheet-journal' > < h2 > Journal/Notes < /h2 > < span > Journal/Notes Stuff Goes here < /span > < /div > < div class = 'sheet-config' > < h2 > Config/Settings < /h2 > < span > Sheet Config/Settings goes here < /span > < /div > < script type = "text/worker" > const buttonlist = [ "character" ,"journal","configuration"]; buttonlist. forEach (button = > { on (`clicked:${button}`, function () { setAttrs ({ sheetTab: button }); }); }); < /script >

I moved the buttons inside the <div> tabs and renamed everything. It worked fine, but I couldn't get it to work inside the fieldset. My intent is to lock the items in the repeating section, which I can do with a checkbox, but that was ugly, and I wanted something a little more sexy, like a lock button that switched between a locked padlock icon and an unlocked one.

I meant he sheet worker triggered by this button: <button type="action" name="act_locked" class="lock-button" >)</button> Do you have a sheet worker for that?

Sorry- I stupidly deleted the whole thing, so I'm trying to recreate it - I think it was : <script type="text/worker">     const buttonlist = ["locked","unlocked"];     buttonlist.forEach(button => {         on(`clicked:${button}`, function() {             setAttrs({                 sheetTab: button             });         });     }); </script>

For the buttons inside the repeating section, you'd need to change the code in the sheet worker to include the repeating setcion. Something like this might work: <script type="text/worker">     const buttonlist = ["locked","unlocked","repeating_section:locked","repeating_section:unlocked",];     buttonlist.forEach(button => {         on(`clicked:${button}`, function() {             setAttrs({                 sheetTab: button             });         });     }); </script> In the above code change this: repeating_section to whatever the repeating section name is.

actually no, that wont work because you need to change the sheetTab in setAttrs too, and the button value wont be correct. The simplest solution is to add an extra sheet worker, specicifically for the repeating section: <script type="text/worker">     const buttonlist = ["locked","unlocked"];     buttonlist.forEach(button => {         on(`clicked:${button}`, function() {             setAttrs({                 sheetTab: button             });         });   on(`clicked:repeating_section:${button}`, function() {             setAttrs({                 repeating_section_sheetTab: button             });         });     }); </script>      Again, change the repeating_section parts to your actual repeating section name.

For a second it looked like that worked, But I had an instance out side the fieldset. Still seems to be not working..

you'll need to post the  code for the entire repeating section, with the swap/hide code inside.

I figured it out. I had previously managed to get it to work with a checkbox,, but had wanted to make it look prettier, so I switched to the action button. I went back to the checkbox and restyled it using the trick from the CSS wizardry. So this html: <fieldset class="repeating_skills">  <div class="skill-row">         <input type="checkbox" class="block-switch"><span></span>           <div class="sheet-block-a">             <input type="text" name="attr_skillname" />                      <select name="attr_dtype" class="dtype">                  <option value="d4">d4</option>                 <option value="d6">d6</option>                 <option value="d8">d8</option>                 <option value="d10">d10</option>                 <option value="d12">d12</option>             </select>           </div>           <div class="sheet-block-b">             consectetur adipiscing elit       </div>      </div> </fieldset> along with this css: .sheet-block-a, .sheet-block-switch:checked ~ .sheet-block-b {   display: block; } .sheet-block-b, .sheet-block-switch:checked ~ .sheet-block-a {   display: none; } .sheet-skill-row{     display:flex; } input[type="checkbox"].sheet-block-switch {     opacity: 0;     width: 16px;     height: 16px;     position: relative;     top: 5px;     left: 6px;     margin: -10px;     cursor: pointer;     z-index: 1; } input[type="checkbox"].sheet-block-switch + span::before {     margin-right: 4px;     border: solid 1px #a8a8a8;     line-height: 14px;     text-align: center;     display: inline-block;     vertical-align: middle;     box-shadow: 0 0 2px #ccc;     background: #f6f6f6;     background: radial-gradient(#f6f6f6, #dfdfdf);     font-family:pictos; } /* Fake radio */ input[type="checkbox"].sheet-block-switch + span::before {     content: "";     width: 12px;     height: 12px;     font-size: 24px;     border-radius: 50%; } /* Fake checkbox */ input[type="checkbox"].sheet-block-switch + span::before {     content: "";     width: 14px;     height: 14px;     font-size: 12px;     border-radius: 3px;     content:")"; } input[type="checkbox"].sheet-block-switch:checked + span::before {     content: "("; } Got the job done.

Now I just have to figure out how to get the hidden section to display correctly. I have a select input in my repeating skill that looks like this: <select name="attr_ability" class="ability-select">   <option value=@{strength}>STR</option>   <option value=@{dexterity}>DEX</option>   <option value=@{intelligence}>INT</option>   <option value=@{perception}>PER</option>   <option value=@{will}>WIL</option> </select> If I copy that into the swap section and disable it, it just sets the value to the first selection (STR), and then passes that value to the roll button macro I have for that section instead of the correct value.. I tried replacing it with a Span with the same name, but then it displays something like "@{dexterity}" when I need it to either say DEX, or display the value for dexterity.

This is what the unlocked vs locked look like: