Scott C. said:
Unfortunately, there's really no way to get repeating section behavior without actually using a repeating section. You can just make a ton of elements to have 100 or so "repeating items", but that will cause your sheet to suffer from attribute bloat and inevitably, you can't hard code in a number of elements to match what some player is going to want to do with their character.
The better option for conditionally showing/hiding elements of a repeating section is to simply expand on that collapse technique and create an attribute (attributes) to track the status of the things that can affect what is displayed. Then simply control the display of the item based on the value of the control attribute.
Thanks! I figured it out.
In case anyone like me with no background knowledge of css comes across this with the same issue, a simplified version of this based on attribute/input values would be:
<fieldset class =repeating_abilities>
<input type="hidden" value="true" name="attr_editing" class="editing"/> // value modified by custom button in my case, but a checkbox also works
<div class="editor">
Source: <select name="attr_ability-source" class ="source"> //a dropdown list with a few options that you want to show/hide sections based on
<option value="Divine">Divine</option>
<option value="Profane">Profane</option>
<option value="Arcane">Arcane</option>
</select>
<span class = "Divine"> //span elements with classes that describe what you want to show/hide
<select name="attr_ability-type-divine" class="divine">
<option value="Divination">Divination</option>
<option value="Rejuvenation">Rejuvenation</option>
</select>
</span>
<span class = "Profane">
<select name="attr_ability-type-profane">
<option value="Cataclysm">Cataclysm</option>
<option value="Scourge">Scourge</option>
</select>
</span>
<span class = "Arcane">
<select name="attr_ability-type-arcane">
<option value="Magisprudence">Magisprudence</option>
<option value="Illusion">Illusion</option>
</select>
</span>
</div>
</fieldset>And then css:
.charsheet input.editing[value="false"] ~ div.editor {//don't display the "editor" div when editing=false
display: none
}
.charsheet select.source:not([value="Divine"]) ~ span.divine {//when value is not "divine", hide the "divine" span
display: none
}
.charsheet select.source:not([value="Profane"]) ~ span.profane {
display: none
}
.charsheet select.source:not([value="Arcane"]) ~ span.arcane {
display: none
}Also note: select.source refers to a select with the css class "source" and similarly input.editing refers to an input (the hidden input) with the css class "editing", not the name "attr_editing", for clarity. Also, the tilde (~) is called a subsequent sibling combinator, it checks the condition on the left (cssSelector[value="someValue"]) and then applies the styling in the brackets to the "sibling" (other element with the same parent) on the right. So input.editing[value="false"] is asking 'is the value of the input with the class="editing" tag equal to "false"?' and if the answer is yes, it applies {display: none} to div.editor.
The wiki page about this is https://wiki.roll20.net/CSS_Wizardry and I would just search the page for "[value" to find the relevant sections. But I figured I'd include the above explanation as well because the examples don't always contain everything needed to follow them + some of this symbol-syntax is difficult to google because google ignores symbols in searches.
Edit: actually I appear to still be missing a component here, as it is still causing issues where changed to one repeating element affects the others. Not sure if that's caused by this or by other functions in my sheet. will continue troubleshooting.
