Show/hide with pure CSS3

HTML

<a href="#" tabindex="1" class="show"> Show</a>
<a href="#" tabindex="2" class="hide"> Hide </a>
         
<ul id="policies-list">
<li>Safeguarding Policy </li>
<li>CRB Policy </li>
<li>Mobile Phone &amp; Camera Policy </li>
<li>Whistle Blowing Policy </li>
<li>Complaints Policy </li>
<li>Premises &amp; Security Policy </li>
<li>Child Safety Policy </li>
<li>Notifying Ofsted Policy </li>
<li>Suitable People Policy </li>
<li>The Montessori People Staff Ratio Policy </li>
<li>Alcohol &amp; Other Substances Policy </li>
<li>Equality of Opportunity Policy </li>
<li>Admissions Policy </li>
</ul>

CSS

.show {
    display: inline; 
}
#policies-list { display:none; margin-top: 16px; }
.hide { display: none; }
.show:focus ~ .hide { display:inline; }
.hide:focus { display: none; }
.show:focus ~ #policies-list { display:inline; }

@media print { .hide, .show, .showtwo { display: none; } }

.show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:none; }