title: Radio button show/hide content
body: <p>I am trying to achieve a show/hide result without javascript and just the radio button.</p>
  
  <p>I've managed to get to this part:</p>
  
  <pre><code>&lt;label for="show"&gt;&lt;span&gt;show&lt;/span&gt;&lt;/label&gt;
  &lt;input type=radio id="show" name="group"&gt;
  &lt;label for="hide"&gt;&lt;span&gt;hide&lt;/span&gt;&lt;/label&gt;    
  &lt;input type=radio id="hide" name="group"&gt;
  &lt;span id="content"&gt;Content&lt;/span&gt;
  
  
  input {
      display:none;
  }
  
  span#content {
      display:none;
  }
  input#show:checked ~ span#content {
    display:block;
  }
  
  input#hide:checked ~ span#content {
      display:none;
  }
  </code></pre>
  
  <p>Demo:
  <a href="http://jsfiddle.net/vtfqW/" rel="nofollow">http://jsfiddle.net/vtfqW/</a></p>
  
  <p>What I am trying to do now is to hide each time the "Show" and "Hide" buttons when they are active. So it will need to start with hidden content and just has the "Show" button and when you click it show the content, hide the "Show" button and show you the "Hide" button.</p>
  
  <p>Is this possible without Javascript?</p>
  
  <p>Thank you!</p>