title: How do I toggle my "read More" with CSS only
body: <p>Looking for solutions in CSS only.
  I have story section on my website, but I only want to display a small part of each story, and the reader can click the "Read More..." if they want to read the rest of the story. This works for me,  But I want the "Read more..." to go away when it is clicked, as a "read less" appears at the bottom of the story, so reader can minimize it again after reading it.  Here is a link to my code: <a href="http://jsfiddle.net/jim54729/1vkd6jdq/" rel="nofollow">My code @js fiddle</a>  </p>
  
  <pre><code>&lt;span id="myReadMore"&gt;
    &lt;h4&gt;First part of the static content&lt;/h4&gt;
    &lt;p&gt;
        &lt;label for="inputShownContent3"&gt;
          &lt;span&gt;Read more....&lt;/span&gt;
        &lt;/label&gt;
    &lt;/p&gt;
  &lt;/span&gt;
  &lt;br /&gt;
  &lt;input type=radio id="inputShownContent3" name="group3" /&gt;
  
  
  &lt;span id="spanHiddenContent3"&gt;
    &lt;p&gt;toggle the second part of the story.&lt;/p&gt;
  
    &lt;label for="inputHiddenContent3"&gt;
      &lt;span&gt;Read less....&lt;/span&gt;
    &lt;/label&gt;
  &lt;/span&gt;
  &lt;input type=radio id="inputHiddenContent3" name="group3" /&gt;
  </code></pre>
  
  <p>And my Css,</p>
  
  <pre><code>input#inputHiddenContent3,#inputShownContent3 
  {
    display: none;
  }
  
  span#spanHiddenContent3 
  {
    display: none;
  }
  
  input#inputShownContent3:checked ~ span#spanHiddenContent3 
  {
    display: block;
  }
  
  input#inputHiddenContent3:checked ~ span#spanHiddenContent3 
  {
    display: none;
  }
  input#inputShownContent3:checked ~
    span#myReadMore
  {
    display: none;
  }
  </code></pre>