title: Hide Show content-list with only CSS, no javascript used
body: <p>I've been searching for a good trick to make a Hide/Show content or a list with only CSS and no javascript.
  I've managed to make this action:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  
     &lt;style&gt;
        #cont {display: none; }
        .show:focus + .hide {display: inline; }
        .show:focus + .hide + #cont {display: block;}
     &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
     &lt;div&gt;
          &lt;a href="#show"class="show"&gt;[Show]&lt;/a&gt;
          &lt;a href="#hide"class="hide"&gt;/ [Hide]&lt;/a&gt;
          &lt;div id="cont"&gt;Content&lt;/div&gt;
     &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Demo here: <a href="http://jsfiddle.net/6W7XD/">http://jsfiddle.net/6W7XD/</a>
  And it's working but not as it should. Here is the problem:
  When the content is shown, you can hide it by clicking "anywhere on the page". How to disable that? how to hide content "only" by clicking hide?
  Thank you in advance!</p>