Repeating Section - Skill Openable Menu Help

Hello, I am making a character sheet for a new TTRPG. There I have abilities repeating section and I would like to add a button that would expand the skill row and show the ability description with a button on the bottom to post the info into the chat. Something like this: But I am not sure how to go about this I have the repeating section with 3 elements now. The input for skill name, the button, and hidden div where the skill description is going to go. When I set the button to be an action button I was able to call a sheetworker function that way, but I have no idea how I could reference the hidden div from there. I think pure JavaScript is disabled here (I think I read that somewhere) so when I tried to do it that way it did not work either. I also tried doing it purely with HTML+CSS like described here but I did not manage to get it working. But I am not sure if I should spend even more time trying to get it working if it isn't the best approach. So my question is: How should I go about it? What approach do you think I should take to solve this problem? Is there a way to reference the <div> with a description through a sheet worker function and change it's display CSS property? Or should I try to spend more time trying to get the pure HTML+CSS approach working? -- do you know if something similar was already implemented in some other sheet? Maybe I could take a look at how they did it there.

Hi Larrax22. here's a very basic version using <details> and <summary> which allows for very little html/css to hide and show a section.  Adjust as needed. (Not sure how/if the repeating rows can "accordion" alongside the adjoining column like your example. Curious if anyone has a css trick for that...) html <fieldset class="repeating_skills"> <div> <label> <span>Skill:</span> <input type="text" name="attr_skill_name" value="" /> </label> </div> <details> <summary> <span>Description</span> </summary> <textarea name="attr_skill_description" placeholder="Description"></textarea> <button type="roll" name="attr_skill_roll" value="&{template:default}{{name=@{skill_name}}}{{Roll=[[ 1d20 ]]}}{{@{skill_description}}}">Roll Skill</button> </details> </fieldset> css .charsheet summary { cursor: pointer; display: revert; } .repcontainer[data-groupname="repeating_skills"] .repitem { border: 1px solid #333; display: inline-flex; flex-direction: column; margin: 2px; max-width: 49%; padding: 10px; width: 100%; }

I think I can make this work. Thank you ^,=,^

Another option for splitting the repeating columns: you might like using css columns instead. html <fieldset class="repeating_skills"> <div> <div> <label> <span>Skill:</span> <input type="text" name="attr_skill_name" value="" /> </label> </div> <details> <summary> <span>Description</span> </summary> <textarea name="attr_skill_description" placeholder="Description"></textarea> <button type="roll" name="attr_skill_roll" value="&{template:default}{{name=@{skill_name}}}{{Roll=[[ 1d20 ]]}}{{@{skill_description}}}">Roll Skill</button> </details> </div> </fieldset> css .charsheet summary { cursor: pointer; display: revert; } .repcontainer[data-groupname="repeating_skills"] { column-count: 2; column-gap: .25em; column-width: 300px; } .repcontainer[data-groupname="repeating_skills"] .repitem { border: 1px solid #333; min-width: 300px; display: grid; }

I ended up using a grid. html < div class = "abilities-container" >     < fieldset class = "repeating_abilities" >         < div class = "ability" >             < input type = "text" name = "attr_abilitty_name" >             < details class = "ability_desc" >                 < summary ></ summary >                 < textarea name = "attr_abilitty_description" placeholder = "Description" ></ textarea >                 < button type = "roll" name = "attr_ability_roll" value = "&{template:default}{{name=@{abilitty_name}}}{{@{abilitty_description}}}" > Display in chat </ button >             </ details >         </ div >     </ fieldset > </ div > css     /* container for the repeating abilities sectioin */     .charsheet .abilities-container {         overflow-y : auto ;         overflow-x : hidden ;         grid-row : 4 ;     }     /* abilities repeating section row*/     .charsheet .ability {         display : grid ;         grid-template-columns : 1fr ;         grid-template-rows : auto ;         padding : 5px ;         margin : 0 ;     }     /* abilities repeating section input*/     .charsheet .ability input {         width : 100% ;     }     /* abilities repeating section input*/     .charsheet .ability .ability_desc {         grid-row : 2 ;         display : none ;     }     /* Show ability description on hover*/     .charsheet .ability:hover > .ability_desc {         display : grid ;     }     /* Alters the appearance of the title of the ability details*/     .repcontainer [ data-groupname = "repeating_abilities" ] summary {         outline : none ;         display : block ;         padding-top : 5px ;         padding-left : 2.3rem ;         position : relative ;         cursor : pointer ;     }     /* Alters the appearance of the ability details*/     .repcontainer [ data-groupname = "repeating_abilities" ] details {         box-sizing : border-box ;         display : grid ;         margin-right : 10px ;     }     .repcontainer [ data-groupname = "repeating_abilities" ] details summary::-webkit-details-marker {         display : none ;     }     /* Animate the arrow before the ability details summary (rotate when opened)*/     .repcontainer [ data-groupname = "repeating_abilities" ] details [ open ] > summary:before {         transform : rotate ( 90deg );     }     /* If details are opened display this text*/     .repcontainer [ data-groupname = "repeating_abilities" ] details [ open ] > summary:after {         content : 'Hide desctiption' ;     }     /* If details are closed display this text*/     .repcontainer [ data-groupname = "repeating_abilities" ] details > summary:after {         content : 'Show description' ;     }     /* Animate the arrow before the ability details summary */     .repcontainer [ data-groupname = "repeating_abilities" ] summary:before {         content : '' ;         border-width : .4rem ;         border-style : solid ;         border-color : transparent transparent transparent black ;         position : absolute ;         left : 1rem ;         transform : rotate ( 0 );         transform-origin : .2rem 50% ;         transition : 0.20s transform ease ;         margin-top : 5px ;     }         /* Style of each individual row of ability*/     .repcontainer [ data-groupname = "repeating_abilities" ] .repitem {         border : 1px solid black ;         margin : -1px 0px ;         border-radius : 5px ;     } I also added some features such as autohide description so it won't get long when the player adds many abilities, arrow animation, scroll overflow, and more. I think it works pretty well. on hover: expanded: I hope this is going to help someone in the future ^,=,^

Sweet