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%;
}

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

css

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