i have this simple code:

   <title>menu mockup</title>
   <style type="text/css">    
      .show {display: none; }
      .hide:focus + .show {display: inline; }
      .hide:focus { display: none; }
      .hide:focus ~ #list { display:none; }
      @media print { .hide, .show { display: none; } }
<p>Here's a list</p>
         <a href="#" class="hide">[hide]</a>
         <a href="#" class="show">[show]</a>
         <ol id="list">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
It shows the expanded version and 'hide' link as default. I can't seem to get it to reverse this - show collapsed version with 'show' link as default.


Thanks and Blessings