title: How to implement Read more / Read less in pure CSS
body: <p>I am implementing a CSS read more / read less capability using <a href="http://codepen.io/Idered/pen/AeBgF" rel="nofollow">http://codepen.io/Idered/pen/AeBgF</a> as a starting point.</p>
  
  <p>I modified it to work off <code>&lt;p&gt;</code> tags vs. <code>&lt;li&gt;</code> list items.</p>
  
  <p>I can't get the code to work on my page at <a href="http://bit.ly/1L5vMm7" rel="nofollow">http://bit.ly/1L5vMm7</a></p>
  
  <p><strong>Here is my version of the CSS:</strong></p>
  
  <pre><code>input.read-more-state {
      display: none;
  }
  
  p.read-more-target {
      font-size: 0;
      max-height: 0;
      opacity: 0;
      transition: .25s ease;
  }
  
  input.read-more-state:checked ~ div.read-more-wrap p.read-more-target {
      font-size: inherit;
      max-height: 999em;
      opacity: 1;
  }
  
  input.read-more-state ~ label.read-more-trigger:before {
      content: 'Read more';
  }
  
  input.read-more-state:checked ~ label.read-more-trigger:before {
      content: 'Read less';
  }
  
  label.read-more-trigger {
      cursor: pointer;
      display: inline-block;
  }
  </code></pre>
  
  <p><strong>Here is my HTML:</strong></p>
  
  <pre><code>&lt;input class="read-more-state" id="read-more-controller" type="checkbox"&gt;
  &lt;div class="read-more-wrap"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
      &lt;p class="read-more-target"&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
      &lt;p class="read-more-target"&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
      &lt;p class="read-more-target"&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
  &lt;/div&gt;
  &lt;label class="read-more-trigger" for="read-more-controller"&gt;&lt;/label&gt;
  </code></pre>
  
  <p>Let me know if you can discover what is conflicting with the RM/RL utility.</p>