Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Hiding Repeating Elements using a Checkbox while keeping added Elements Visible

I am still quite new to coding in a broad sense.  I've very much learning as I go by looking at how other sheets have been made and testing how they function within Roll20.  I feel that I have a somewhat reasonable grasp on how checkboxes and repeating sections work, but not necessarily how they function together.  Has anyone found a method of hiding repeating elements within a checkbox but allowing any rows added by the repeating section to remain visible even when rest is hidden?  I suppose what I'm really wanting to do is hide the "add" and "modify" buttons while leaving the added rows. Something tells me this will likely require a Sheetworker, but I'm still trying to understand how those work.  I would appreciate any insight y'all have to offer.  I'm in awe of the work those of you have done with the many sheets I've seen thus far!  Thank you in advance!
1672689829
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Can you give more details on what you're looking to do? You've asked for two different issues. Hiding the add/modify buttons is one issue. Hiding elements within the repeating section (or even specific rows) is another issue. These two are related and use the same techniques at base, but have their own unique issues and work arounds.
1672693666

Edited 1672693698
Thank you for your reply, and apologies! I suppose I still don't yet know enough to properly explain what I'm looking to do.  I want to hide the add/modify buttons whenever they aren't being used to add new rows to a repeating section. This is what I was using to test out what I'm attempting.  Just to make sure it's known, I've pulled these from other sheets as I'm still far too new to write my own code: <div class='sheet-2colrow'> <div class="sheet-center_skill" style="width:95%"> <h3 style="width:98%">Combat Skills</h3> <input type="text" class="sheet-text_skillname" value="Heavy Weapons" readonly style="margin-left:35px" /> <div class="sheet-cdiv"> <input class="sheet-HideConfig" type="checkbox" checked="checked" name="attr_is_config"> <div class="sheet-config"> <div class='sheet-col'> <div> <fieldset class="repeating_hw"> <button class="sheet-skill_button" type='roll' name="attr_roll-hw" value="&{template:default} {{name=@{character_name}}} {{@{repeating_hw_$0_hw_skill}=[[[[@{hw}]] + [[?{Skill Mod|0}]] - [[1d100]] ]]}}" /></button> <input type="text" class="sheet-text_skillname" name=attr_hw_skill /> <input name="attr_tagskill5" value="1" type="checkbox">   <input type="number" class="sheet-number" name="attr_hw" value="(@{mod-hw} + (@{strength_base} - 10) + (floor((@{dexterity_base} - 10)/2)) + (floor((@{intelligence_base} - 10)/2)))" disabled="true"/> <input type="number" class="sheet-number"name="attr_mod-hw" value="0" /> </fieldset> </div> </div> </div> </div> </div> </div> This is hiding the add/modify buttons of course, but as I'm sure y'all have gathered, it hides everything else as well.  I realize I'm probably hitting above my weight class here.
1672695840

Edited 1672696006
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Thanks for the example code Oneiris! That makes answering your question much easier. And don't worry about your skill level, I'm pretty sure 90% of us script/sheet authors on R20 started out with their first coding being on R20 (except The Aaron of course). In the future, it helps if you share all the relevant parts of your code, which in this case would be the html (as you have above) and the CSS. I do something similar to what you are attempting. The thing to keep in mind is how you want the user to reveal the add/edit buttons. If you make it something like having to click a button or check a checkbox, then it becomes a hassle for the user and most of them will probably just leave it shown all the time anyways. The solution I settled on was to hide the interface buttons when the repeating section wasn't being interacted with, which I defined as the mouse hovering over the area, the user having tabbed to the area, or the user having tabbed to anything inside the area. Here's a rough example of how you'd do that: HTML <div class="repeating-container"> <fieldset class="repeating_hw"> <button class="sheet-skill_button" type='roll' name="attr_roll-hw" value="&{template:default} {{name=@{character_name}}} {{@{repeating_hw_$0_hw_skill}=[[[[@{hw}]] + [[?{Skill Mod|0}]] - [[1d100]] ]]}}" /></button> <input type="text" class="sheet-text_skillname" name=attr_hw_skill /> <input name="attr_tagskill5" value="1" type="checkbox">   <input type="number" class="sheet-number" name="attr_hw" value="(@{mod-hw} + (@{strength_base} - 10) + (floor((@{dexterity_base} - 10)/2)) + (floor((@{intelligence_base} - 10)/2)))" disabled="true" /> <input type="number" class="sheet-number" name="attr_mod-hw" value="0" /> </fieldset> </div> CSS .repeating-container:not(:hover):not(:focus):not(:focus-within) .repcontrol{ /* We're going to set the opacity on this so that it's still accessible to screen readers so that user's that use assistive technology can more easily interact with our sheet */ opacity:0; } That's all you need for the basics. You need the wrapper element ( repeating-container in my example) so that the hover detection will work correctly. If you try to do this by just keying off of hover on the repeating section itself, and/or the repcontrol itself, you'll run into issues where there might be a gap between the two which will cause the repcontrol to flicker in and out of visibility while the user tries to navigate to it. If you want to add some flair to it, you can add some transition effects as well. You can also style the buttons so that they more closely match the styling of your sheet. There's examples of each of those throughout the roll20 character sheet repository.
This is exactly what I was looking for! I hadn't thought about how it might impact users as you mentioned, and I'll try to keep that in mind moving forward!  This gives me a lot more to work with.  Thank you so much for your help!