Show/Hide fields within a repeating section

I've been trying to get this working for a number of weeks, i know i should have posted here first but can anyone help me, my show//hide logic is just not working and I want to understand how why i'm going wrong i have this repeating sections  <div class="sheet-cantriplist"> <fieldset class="repeating_cantrips"> <label data-i18n-title="repeatingcantrips" title="repeatingcantrips"> <input data-i18n-placeholder="spellname" name="attr_spellname" placeholder="spellname" spellcheck="false" title="@{spellname}" type="text" value="" /> <input data-i18n-placeholder="spellpg" name="attr_spellpg" placeholder="spellpg" spellcheck="false" title="@{spellpg}" type="number" value="" /> <input data-i18n-placeholder="spellnotetoggle" placeholder="spellnotetoggle" spellcheck="false" title="@{spellnotetoggle}" type="checkbox" name="attr_spellnotetoggle" value="1" /> <input class="sheet-cantripnotetoggle" type="hidden" name="attr_spellnotetoggle" /> <div class="sheet-spellnotes"> <textarea data-i18n-placeholder="spellnotes" name="attr_spellnotes" placeholder="spellnotes" spellcheck="false" title="@{spellnotes}" type="text" value="" /> </div> </label> </fieldset> </div> that I'm trying to format with this css code div.sheet-cantriplist label[data-i18n-title="repeatingcantrips"] { width: 100%; display: grid; grid-template-columns: repeat(20,minmax(0,1fr)); grid-template-rows: 10px, 30px; margin: 2pt 0pt 0pt 0pt; justify-content: no-space; min-width: 0; width: 100%; } div.sheet-display-cantrips label[data-i18n-title="repeatingcantrips"] > input { font-family:Times,serif; font-size: 0.7em; height: 30px; border: none; border-bottom: solid 1pt; border-radius:0; min-width: 0 !important; width: 100% !important; } div.sheet-display-cantrips label[data-i18n-title="repeatingcantrips"] > input[data-i18n-placeholder="spellname"]{ grid-column: 1 / span 16; grid-row: 1 !important; } div.sheet-display-cantrips label[data-i18n-title="repeatingcantrips"] > input[data-i18n-placeholder="spellpg"]{ grid-column: 18 / span 2 !important; grid-row: 1 !important; } div.sheet-display-cantrips label[data-i18n-title="repeatingcantrips"] > input[data-i18n-placeholder="spellnotetoggle"] { grid-column: 20 !important; grid-row: 1 !important; } div.sheet-display-cantrips label[data-i18n-title="repeatingcantrips"] > div.sheet-spellnotes { grid-column: 1 / span 19 !important; grid-row: 2 !important; display: none; } div.sheet-display-cantrips label[data-i18n-title="repeatingcantrips"] > div.sheet-spellnotes > textarea { font-family:Times,serif; font-size: 0.7em; height: 60px; border: none; border-bottom: solid 1pt; border-radius:0; min-width: 0 !important; width: 100% !important; } input.sheet-cantripnotetoggle[value='1']~div.sheet-spellnotes { display: block; }

Can you describe how you want it to work? What are you showing and hiding, and what causes that to happen? In all likelihood you dont need to use anything like this [data-i18n-title="repeatingcantrips"] just simple class values usually do the trick. Also putting everything inside a label looks weird to me, I think you'd be better off using a div there.

I have a solution posted a while ago that lets you handle all spell levels with a single repeating section, and change which are displayed at the click of a button, but I'm not sure of the page.

i'd like to click the checkbox and show/hide the notes

Give the checkbox a class, say "toggle-notes", and then one of these two should do the trick (not sure if :unchecked is supported on roll20, hence the second version): input [ type = "checkbox" ] .sheet-toggle-notes :unchecked ~ div.sheet-spellnotes {     display : none ; } input [ type = "checkbox" ] .sheet-toggle-notes:not ( :checked ) ~ div.sheet-spellnotes {     display : none ; } This will hide the div containing the textbox if unchecked, and show it if checked. This approach will work for all rows of the repeating section, and will only affect the current row checked.

You can also use the value, but in your code you assign a display:block, but dont account for hiding the block. Its default value is block, so it will always be visible. Using value, you still need to add a class to the checkbox, but it would look like this: input [ type = "checkbox" ] .sheet-toggle-notes [ value = "0" ] ~ div.sheet-spellnotes {     display : none ; } Again you hide it if unchecked (value = 0).

thank you i didn't use exactly the solution you gave, but the examples you listed were enough to see where i was going wrong

great :)

ok so now I'm trying to get a drop down to show hide a number of other dropdowns..  I have the hidden value updating correctly, but for some reason my show/hide code is refusing to work. <div class="sheet-classlist"> <fieldset class="repeating_class"> <label data-i18n-title="repeatingclass" title="repeatingclass"> <input data-i18n-placeholder="class" name="attr_class" placeholder="class" spellcheck="false" title="@{class}" type="text" list="classlist"/> <input data-i18n-placeholder="level" type="hidden" class="sheet-archtypetoggle" name="attr_archtypeclass" value="archtype"/> <div class="sheet-archtypeslist"> <div class="sheet-archtypelist"> <input data-i18n-placeholder="archtype" name="attr_archtype" placeholder="archtype" spellcheck="false" title="@{archtype}" type="text" list="archtypelist"/> </div> <div class="sheet-adeptlist"> <input data-i18n-placeholder="archtype" name="attr_archtype" placeholder="archtype" spellcheck="false" title="@{archtype}" type="text" list="adeptlist"/> </div> <div class="sheet-bardlist"> <input data-i18n-placeholder="archtype" name="attr_archtype" placeholder="archtype" spellcheck="false" title="@{archtype}" type="text" list="bardlist"/> </div> <div class="sheet-berserkerlist"> <input data-i18n-placeholder="archtype" name="attr_archtype" placeholder="archtype" spellcheck="false" title="@{archtype}" type="text" list="berserkerlist"/> </div> <div class="sheet-clericlist"> <input data-i18n-placeholder="archtype" name="attr_archtype" placeholder="archtype" spellcheck="false" title="@{archtype}" type="text" list="clericlist"/> </div> <div class="sheet-druidlist"> <input data-i18n-placeholder="archtype" name="attr_archtype" placeholder="archtype" spellcheck="false" title="@{archtype}" type="text" list="druidlist"/> </div> <div class="sheet-fighterlist"> <input data-i18n-placeholder="archtype" name="attr_archtype" placeholder="archtype" spellcheck="false" title="@{archtype}" type="text" list="fighterlist"/> </div> <div class="sheet-heraldlist"> <input data-i18n-placeholder="archtype" name="attr_archtype" placeholder="archtype" spellcheck="false" title="@{archtype}" type="text" list="heraldlist"/> </div> <div class="sheet-rangerlist"> <input data-i18n-placeholder="archtype" name="attr_archtype" placeholder="archtype" spellcheck="false" title="@{archtype}" type="text" list="rangerlist"/> </div> <div class="sheet-roguelist"> <input data-i18n-placeholder="archtype" name="attr_archtype" placeholder="archtype" spellcheck="false" title="@{archtype}" type="text" list="roguelist"/> </div> <div class="sheet-sorcererlist"> <input data-i18n-placeholder="archtype" name="attr_archtype" placeholder="archtype" spellcheck="false" title="@{archtype}" type="text" list="sorcererlist"/> </div> <div class="sheet-warlocklist"> <input data-i18n-placeholder="archtype" name="attr_archtype" placeholder="archtype" spellcheck="false" title="@{archtype}" type="text" list="warlocklist"/> </div> <div class="sheet-wizardlist"> <input data-i18n-placeholder="archtype" name="attr_archtype" placeholder="archtype" spellcheck="false" title="@{archtype}" type="text" list="wizardlist"/> </div> </div> <input data-i18n-placeholder="level" name="attr_level" placeholder="level" spellcheck="false" title="@{level}" type="number"/> </label> </fieldset> </div> So selecting a class updates the hidden attribute archtypeclass (class: sheet-archtypetoggle) this is the sheetwork -it is working fine on("change:repeating_class:class", function() { getAttrs(["repeating_class_class"], function(values) { var cclass = values["repeating_class_class"]||""; var archtype = "archtype"; if (cclass == "Adept") { archtype = "adept" ;}; if (cclass == "Bard") { archtype = "bard" ;}; if (cclass == "Berserker") { archtype = "berserker" ;}; if (cclass == "Cleric") { archtype = "cleric" ;}; if (cclass == "Druid") { archtype = "druid" ;}; if (cclass == "Fighter") { archtype = "fighter" ;}; if (cclass == "Herald") { archtype = "herald" ;}; if (cclass == "Ranger") { archtype = "ranger" ;}; if (cclass == "Rogue") { archtype = "rogue" ;}; if (cclass == "Sorcerer") { archtype = "sorcerer" ;}; if (cclass == "Warlock") { archtype = "warlock" ;}; if (cclass == "Wizard") { archtype = "wizard" ;}; setAttrs({ "repeating_class_archtypeclass": archtype, }); }); });  it is the css code that is not div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist { grid-column: 19 / span 15; } /*archtype dropdown logic*/ div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-archtypelist, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-adeptlist, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-bardlist, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-berserkerlist, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-clericlist, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-druidlist, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-heraldlist, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-fighterlist, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-marshallist, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-rangerlist, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-roguelist, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-sorcererlist, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-warlocklist, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-wizardlist { display: none; } div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-archtypelist > input, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-adeptlist > input, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-bardlist > input, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-berserkerlist > input, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-clericlist > input, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-druidlist > input, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-heraldlist > input, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-fighterlist > input, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-marshallist > input, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-rangerlist > input, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-roguelist > input, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-sorcererlist > input, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-warlocklist > input, div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-wizardlist > input { font-family:Times,serif; font-size: 0.8em; border: none; border-bottom: solid 1pt; border-radius:0; min-width: 0; width: 100%; vertical-align: middle; } .sheet-archtypetoggle[value="archtype"] ~ div.sheet-archtypelist, .sheet-archtypetoggle[value="adept"] ~ div.sheet-adeptlist, .sheet-archtypetoggle[value="bard"] ~ div.sheet-bardlist, .sheet-archtypetoggle[value="berserker"] ~ div.sheet-berserkerlist, .sheet-archtypetoggle[value="cleric"] ~ div.sheet-clericlist, .sheet-archtypetoggle[value="druid"] ~ div.sheet-druidlist, .sheet-archtypetoggle[value="herald"] ~ div.sheet-heraldlist, .sheet-archtypetoggle[value="fighter"] ~ div.sheet-fighterlist, .sheet-archtypetoggle[value="marshal"] ~ div.sheet-marshallist, .sheet-archtypetoggle[value="ranger"] ~ div.sheet-rangerlist, .sheet-archtypetoggle[value="rogue"] ~ div.sheet-roguelist, .sheet-archtypetoggle[value="sorcerer"] ~ div.sheet-sorcererlist, .sheet-archtypetoggle[value="warlock"] ~ div.sheet-warlocklist, .sheet-archtypetoggle[value="wizard"] ~ div.sheet-wizardlist { display:block; } can anyone see where i'm going wrong?

Your code looks way more complicated than is needed. I don't know why you are using a structure like this: div.sheet-character-info label[data-i18n-title="repeatingclass"] > div.sheet-archtypeslist > div.sheet-archtypelist, The best way to display/hide code, is to rely on it being shown normally, since the default is to do that. And then just check when the value is not what shows it, and use display:none, to hide it then. Also you don't need to use the > operator. personally I'd go for the least CSS that is needed. So firs setting up the default, you could use something lile div.sheet-classlist div.sheet-archtypeslist input.sheet-archtype { font-family:Times,serif; font-size: 0.8em; border: none; border-bottom: solid 1pt; border-radius:0; min-width: 0; width: 100%; vertical-align: middle;                          display:none; } Ask yourself, is that sequence going to appear anywhere else in the sheet: an input with class archtype , inside a div with class archtypelist which is itself inside a div with class classlist .Note that doing it this way you can have gaps - the fact there's a fieldset in there doesn't matter. Basically the goal is to look for a pattern that is unique, that isnt repeated anywhere else on the sheet (you might be able to get away with using just input.sheet-archtype and nothing else. Check your CSS is working for those (you might not want border on the input, for example, but on the containing div). Now, as to the hide and show bits, I was starting to answer that, then realised I dont know what you trying to hide. You have a lot of inputs there, and theyt all have exactly the same name, so they are all the exact same input. What are you trying to do here?

i'll be honest css is always a dark art to me, still not wrapped my head around it.. so i mostly go with what works the input each have a different list associated so the idea is when a class is chosen a different input appears with the correct list/dropdown

The attribute value will always be the same for all of them, since the attribute has the same name. Is this intended?

yes, the only thing i want to change is the list... now there many be a better way to do this, but this is the way i thought of.. basically i want a dynamic list for archtype based off the class someone chooses

Does that work?I was under the impression that roll20 doesnt support dynamic lists.

it doesn't but what I was attempting was to have a number of different text inputs each with a different list.  They start out hidden and then display the correct list depending on the Class chosen. So far I have the hidden input correctly updated ready to show the correct input (similar to the way that Tabbed pages work with buttons.. but for some reason my code isn't displaying any entry.. it is this bit that I'm trying to get to work

Paul V. said: it doesn't but what I was attempting was to have a number of different text inputs each with a different list.&nbsp; They start out hidden and then display the correct list depending on the Class chosen. <a href="https://wiki.roll20.net/CSE#Datalist" rel="nofollow">https://wiki.roll20.net/CSE#Datalist</a> If you want to switch datalists for an input, you can create several inputs and then toggle which input is visible , changing the options shown from the datalists. &lt; input type = "text" list = "classmage" name = "attr_class" class = "mage-skill" &gt; &lt; input type = "text" list = "classfighter" name = "attr_class" class = "fighter-skill" &gt; &lt; datalist id = "classmage" &gt; &lt; option value = "Spellcraft" &gt; Spellcraft &lt; /option &gt; &lt; option value = "Arithmancy" &gt; Arithmancy &lt; /option &gt; &lt; /datalist &gt; &lt; datalist id = "classfighter" &gt; &lt; option value = "Brawl" &gt; Brawl &lt; /option &gt; &lt; option value = "Weapon Mastery" &gt; Weapon Mastery &lt; /option &gt; &lt; /datalist &gt;

this is what i'm trying to do above, its just not working for some reason