title: Non-JS, CSS-only technique for show more/less text, for page with 'n' text elements
body: <p>I'm creating a simply <code>show more</code> solution for a page where there are <code>n</code> text elements that need toggling between <code>show</code> and <code>hide</code>. <code>n</code> is dynamic and not fixed.</p>
  
  <p>For the purposes of this question, I'm exploring non-JS, CSS-only solutions. </p>
  
  <p>It's possible to achieve a <code>show</code> and <code>hide</code> toggle functionality for a single element via CSS (solution below). But how does one extend it to <code>n</code> elements? Would be great to get an illustrative, working answer.</p>
  
  <hr>
  
  <p>How I would do it in a single text element case:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#textarea {
      /* hide by default: */
      display: none;
  }
  
  /* when the checkbox is checked, show the neighbouring #textarea element: */
  #textAreaToggle:checked + #textarea {
      display: block;
  }
  
  /* position the checkbox off-screen: */
  input[type="checkbox"] {
      position: absolute;
      left: -1000px;
  }
  
  /* Aesthetics only, adjust to taste: */
  label {
      display: block;
  }
  
  /* when the checkbox is unchecked (its default state) show the text
     'Show ' in the label element: */
  #textAreaToggle + #textarea + label::before {
      content: 'Show ';
  }
  
  /* when the checkbox is checked 'Hide ' in the label element; the
     general-sibling combinator '~' is required for a bug in Chrome: */
  #textAreaToggle:checked ~ #textarea + label::before {
      content: 'Hide ';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="textAreaToggle" type="checkbox" /&gt;&lt;p id="textarea"&gt;This is hidden textarea, that needs to be shown&lt;/p&gt;&lt;label for="textAreaToggle"&gt;textarea&lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This single-case solution is based on <a href="https://stackoverflow.com/a/20735921/4936905">this</a> answer, and it's tried and tested. You can run the code snippet to see for yourself. </p>
  
  <p>But I'm struggling to generalize it for <code>n</code> text elements on a single page (in a CSS-only setting), thus this question.</p>