Minimizing repeating sections independent of one another

I'm trying to figure out how I can minimize part of a weapon block that I made using a repeating section. I want to be able to minimize the first weapon in the repeating section without minimizing the second and vice versa. HTML is below. <fieldset class="repeating_weapon"> <!--min/max buttons--> <button type="action" class="sheet-minToggleWeapon" name="act_minweaponbtn">Minimize</button> <button type="action" class="sheet-maxToggleWeapon" name="act_maxweaponbtn">Maximize</button> <input type="hidden" class="sheet-maxMinWeaponHidden" name="attr_maxminweapon" value="maxweaponbtn"> <!--weapon name--> <div class="sheet-weaponNameDiv"> <input type="text" class="sheet-weaponNameInput" name="attr_weaponName" placeholder="Weapon Name"> </div> <!--full block--> <div class="sheet-fullBlockWeapon"> <!--range--> <div class="sheet-weaponRangeDiv"> <h3 class="sheet-weaponRangeTitle">Range</h3> <input type="number" class="sheet-weaponRangeInput" name="attr_range"> </div> </div> </fieldset> The div under <!--full block--> is what I'm looking to have minimized while the rest is on at all times. The buttons and input at the top under <!--min/max buttons--> is to tie them to the javascript and css as shown below. I've used this method for things not in a repeating section and it worked, but I'm not sure how to get it to work within a repeating section. Javascript const maxMinWeaponList = ["maxweaponbtn","minweaponbtn"]; maxMinWeaponList.forEach(button => { on(`clicked:${button}`, function() { setAttrs({ maxminweapon: button }); }); }); CSS /* min/max toggle */ .sheet-maxMinWeaponHidden[value="maxweaponbtn"] ~ div.sheet-fullBlockWeapon{ display: block; } .sheet-maxMinWeaponHidden[value="minweaponbtn"] ~ div.sheet-fullBlockWeapon{ display: none; } I should also mention I'm not fluent in coding at all and javascript is especially hard for me to wrap my head around. The method I have above is just something I found online.

Names in repeating sections are complicated. I'm not sure how well this works with action buttons, but try this: const maxMinWeaponList = ["maxweaponbtn","minweaponbtn"]; maxMinWeaponList.forEach(button => { on(`clicked:repeating_weapons:${button}`, function() { setAttrs({ repeating_weapons_maxminweapon: button }); }); });

I've tried that before. Just tried it again in case but no, it doesn't work. I also tried something with getSectionIDs but admittedly just pieced it together from some other code I'm using and didn't really know how to format it. This is what I tried. const maxMinWeaponList = ["maxweaponbtn","minweaponbtn"]; maxMinWeaponList.forEach(button => { on(`clicked:${button}`, function() { getSectionIDs("repeating_weapon", function (idarray) { let rows = {}; for (let i = 0; i < idarray.length; i++) { rows["repeating_weapon_" + idarray[i] + "_maxminweapon"] = button; } if(rows) setAttrs(rows); }); }); });

the `clicked:${button}` part wont work unless you pass a repeating section name that it recognises. But i noticed another issue You're CSS uses a maxMinArmorHidden class but the html button uses maxMinWeaponHidden. So, try changing both sheet worker and css: const maxMinWeaponList = ["maxweaponbtn","minweaponbtn"]; maxMinWeaponList.forEach(button => { on(`clicked:repeating_weapons:${button}`, function() { setAttrs({ repeating_weapons_maxminweapon: button }); }); }); /* min/max toggle */ .sheet-maxMinWeaponHidden[value="maxarmorbtn"] ~ div.sheet-fullBlockArmor{ display: block; } .sheet-maxMinWeaponHidden[value="minarmorbtn"] ~ div.sheet-fullBlockArmor{ display: none; }

Copied the wrong CSS. I'm using the same method for armor. I edited the post.

First thing: I had an error in my sheet worker, using repeating_weapon s , instead or repeating_weapon. But that wasnt enough to get it working. I'm not entirely sure why it wasnt working, maybe something to do with the text assigned to the input, but I'm not 100% sure. It does work with this approach. CSS /* min/max toggle */         div.sheet-fullBlockWeapon {             display: none;         }         input.sheet-maxMinWeaponHidden[value="1"] ~ div.sheet-fullBlockWeapon {             display: block;         } HTML <fieldset class="repeating_weapon">     <!--min/max buttons-->     <button type="action" class="sheet-" name="act_minweaponbtn">Minimize</button>     <button type="action" class="sheet-" name="act_maxweaponbtn">Maximize</button>     <input type="hidden" class="sheet-maxMinWeaponHidden" name="attr_maxminweapon" value="1">     <!--weapon name-->     <div class="sheet-weaponNameDiv">         <input type="text" class="sheet-weaponNameInput" name="attr_weaponName" placeholder="Weapon Name">     </div>     <!--full block-->          <div class="sheet-fullBlockWeapon">         <!--range-->         <div class="sheet-weaponRangeDiv">             <h3 class="sheet-weaponRangeTitle">Range</h3>             <input type="number" class="sheet-weaponRangeInput" name="attr_range">         </div>     </div> </fieldset> const maxMinWeaponList = ["maxweaponbtn","minweaponbtn"];     maxMinWeaponList.forEach(button => {         on(`clicked:repeating_weapon:${button}`, function() {             getAttrs(['repeating_weapon_maxminweapon'], function(v) {                 setAttrs({                     repeating_weapon_maxminweapon: 1 - parseInt(v.repeating_weapon_maxminweapon)                 });             });                      });     }); With this approach you only need one button. If you want to keep both, you'd need to edit the sheet worker: const maxMinWeaponList = ["maxweaponbtn","minweaponbtn"];     maxMinWeaponList.forEach(button => {         on(`clicked:repeating_weapon:${button}`, function() {             const output = (button === "maxweaponbtn") ? 1 : 0;             setAttrs({                 repeating_weapon_maxminweapon: output             });         });     });

It works! I opted for keeping both buttons. Thank you so much for the help!

yay :) You're welcome.