Read more/less button for multiple content - css

Question

I've been trying to display several sheets thanks to the more/less button with pure CSS based on this example, one of the solution suggested for Pure CSS - Read more/Read Less images. I have no problem displaying the first sheet. But for the others, it doesn't work. Each time I click on the "read more" button, only the first sheet appears. I guess that I need to change the id input ref. As you will see <xsl:for-each select="./#xml:id"> is a different sheet.
This is a xsl section:
<xsl:template match="Name of the template">
<xsl:for-each select=".">
<xsl:if test="count(./key('whatAction-subCat', #xml:id)) != 0">
<li>
<!-- some data -->
<br />
<xsl:call-template name="whatResult"/>
</li>
</xsl:if>
</xsl:for-each>
</xsl:template>
<xsl:template name="whatResult">
<input type="checkbox" class="read-more-state" id="result" />
<div class="read-more-wrap">
<xsl:text>Read</xsl:text>
<span class="read-more-target">
<table class="table-2">
<caption>What Result</caption>
<tr>
<th>Occur. in</th>
<th>What Role</th>
<th>What Context</th>
<th>What Sphere</th>
</tr>
<xsl:for-each select="./#xml:id">
<!-- verb competition -->
<xsl:call-template name="contend"/>
<!-- verb motion -->
<xsl:call-template name="self_motion"/>
<xsl:call-template name="arriving"/>
<!-- etc -->
...
</xsl:for-each>
</table>
</span>
</div>
<label for="result" class="read-more-trigger"></label>
</xsl:template>
A few print screen for a better understanding: show less btn, show more btn, and show more of several btn.
As you will see, another concern is the space between the hidden content and the more button. I need to look to the CSS--one step at a time...
In advance, thanks so very much for your help!
Vanessa

Answer 1

I found the following solution:
My main concern is to display a long list of data at the request of a user. Thus, I choose the modal solution based on this example. In order to avoid the display of the same sheet, I added the modal solution to each <xsl:template name="A NAME>.
<!-- I call the templates where I add the modal solution -->
<xsl:template match="category[#corresp]">
<xsl:for-each select="./#xml:id">
<!--to display content in each sub-category, ex. 'contend', 'self_motion' -->
<xsl:if test=".!contains(., 'contend') and //ref[#corresp='#contend'] ">
<xsl:call-template name="contend"/>
</xsl:if>
<xsl:if test=".!contains(., 'self_motion') and //ref[#corresp='#self_motion'] ">
<xsl:call-template name="self_motion"/>
</xsl:if>
</xsl:for-each>
</xsl:template>
<!-- some templates of data with the modal solution -->```
<xsl:template name="contend">
<div id="contend">
</div>
<a href="#modal-container-contend" aria-label="Open Navigation">
<xsl:text>Read the detailed structural unit for this sub-category</xsl:text>
</a>
<div id="modal-container-contend">
<div class="modal">
<table class="table-2">
<caption>What Result</caption>
<tr>
<th>Occur. in</th>
<th>What Role</th>
<th>What Context</th>
<th>What Sphere</th>
<th style="text-align: center">What Behavior</th>
</tr>
<xsl:for-each
select="//ref[#corresp = '#contend']/ancestor::node()/../following-sibling::ref[#n = '2']">
<xsl:call-template name="following-subCatVerb"/>
</xsl:for-each>
</table>
close
</div>
</div>
</xsl:template>
<xsl:template name="self_motion">
<div id="self_motion">
</div>
<a href="#modal-container-self-motion" aria-label="Open Navigation">
<xsl:text>Read the detailed structural unit for this sub-category</xsl:text>
</a>
<div id="modal-container-self-motion">
<div class="modal">
<table class="table-2">
<caption>What Result</caption>
<tr>
<th>Occur. in</th>
<th>What Role</th>
<th>What Context</th>
<th>What Sphere</th>
<th style="text-align: center">What Behavior</th>
</tr>
<xsl:for-each
select="//ref[#corresp = '#self_motion']/ancestor::node()/../following-sibling::ref[#n = '2']">
<xsl:call-template name="following-subCatVerb"/>
</xsl:for-each>
</table>
close
</div>
</div>
</xsl:template>
<!-- the same logic for same sheets of data-->
And the CSS for the modal solution:
#modal-container-contend,
#modal-container-self-motion,
#modal-container-arriving,
#modal-container-satisfying {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; display: flex;}
.modal {width: 70%; background: #fff; padding: 20px; text-align: center;}
#modal-container-contend:not(:target),
#modal-container-self-motion:not(:target),
#modal-container-arriving:not(:target),
#modal-container-satisfying:not(:target) {opacity: 0; visibility: hidden; transition: opacity 1s, visibility 1s;}
#modal-container-contend:target,
#modal-container-self-motion:target,
#modal-container-arriving:target,
#modal-container-satisfying:target {opacity: 1; visibility: visible; transition: opacity 1s, visibility 1s;}