collapsible inside repeating section

I have a repeating section.&nbsp; Each section has a title at the top, which is really just an input field, and below that it contains a lot of information.&nbsp; I'd like to set up the title as a button, or put a button next to the title, that will toggle between displaying and hiding the information below the title, which is the rest of the repeating section. By collapsible, I mean this:&nbsp; <a href="https://www.w3schools.com/howto/howto_js_collapsible.asp" rel="nofollow">https://www.w3schools.com/howto/howto_js_collapsible.asp</a> From what I've found, the collapsible sections use javascript to function.&nbsp; This makes sense.&nbsp; I'm just not sure how to modify the javascript collapsible logic to handle each of the repeating sections. I do think this is possible, but if I'm asking for the moon here, I'll understand.&nbsp; Thanks for reading.

I ran into a similar desire not too long ago.&nbsp; I made a line within each repeating section that could show/hide from a checkbox which just runs from css.&nbsp; The first 8 or so posts of that thread may give you some inspiration:&nbsp; <a href="https://app.roll20.net/forum/post/8021876/show-slash-hide-fields-within-a-repeating-section/?pageforid=8021876#post-8021876" rel="nofollow">https://app.roll20.net/forum/post/8021876/show-slash-hide-fields-within-a-repeating-section/?pageforid=8021876#post-8021876</a>

Unfortunately, that implementation of collapsible is not supported for Roll20 character sheets. The only buttons supported on character sheets are "roll" buttons (a Roll20 specific button), and "action" buttons. You can mimic the behavior by using the show/hide method outlined in the css wizardry wiki page. I use this method quite frequently in my repeating sections so that items have a display view that takes up very little room, and an expanded view for editing. This is roughly what my code looks like: Relevant HTML &lt;div class='expandable-section'&gt; &lt;input class="expand-control" type="hidden" name="attr_expand_item" value="1"/&gt; &lt;label class="expand-button"&gt; &lt;input type="checkbox" name="attr_expand_item" value="1" checked="true"/&gt;&lt;span class="expand-state pictos"&gt;4&lt;/span&gt; &lt;/label&gt; &lt;div class="expanded-view"&gt; &lt;span&gt;What you want shown when the section is expanded goes here&lt;/span&gt; &lt;/div&gt; &lt;div class='collapsed-view'&gt; &lt;span&gt;What you want shown when the section is collapsed goes here&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; Relevant CSS .sheet-expand-control[value="0"] ~ .sheet-expanded-view, .sheet-expand-control:not([value="0"]) ~ .sheet-collapsed-view{ display:none; } .sheet-expandable-section:not(:hover) &gt; .sheet-expand-button{ opacity:0; } .sheet-expand-control:not([value="0"]) ~ .sheet-expanded-view{ border-top:1px solid black; border-bottom:1px solid black; margin-bottom:0.5em; } .sheet-expandable-section &gt; .sheet-expand-button{ display:grid; grid-template-columns:auto; grid-template-rows:auto; grid-template-areas:"button"; place-items:center; width:auto; height:auto; } .sheet-expand-button &gt; span{ &nbsp;&nbsp;&nbsp;&nbsp;font-family:pictos; } .sheet-expandable-section &gt; .sheet-expand-button &gt; input[type=checkbox]{ opacity:0; z-index:10; width:100%; height:100%; grid-area:button; } .sheet-expandable-section &gt; :not(.sheet-expand-button){ grid-column:1 / -1; } .sheet-collapsed-view{ display:grid; margin-bottom:0.5em; clip-path:var(--spanPolygon); min-height:15px; } .sheet-expandable-section &gt; .sheet-expand-button &gt; .sheet-expand-state{ grid-area:button; } .sheet-expand-button &gt; input:checked ~ .sheet-expand-state{ transform:rotate(90deg); } You can then place the expand-button label wherever you need it.

Thank you very much.&nbsp; I'm still fiddling with the UI minutia, but it works beautifully. = )