Elementy zwijane w czystym CSS: Tworzenie akordeonu

Czyste CSS zwijane (po kliknięciu) kontenery / elementy / cokolwiek.

http://jsfiddle.net/u3Cjz

HTML Kod:

<div id="elem"></div>

<a href="#" class="par cac1">Zakładka 1</a>
<a href="#" class="par cac2">Zakładka 2</a>
<a href="#" class="par cac3">Zakładka 3</a>

<h1 class="zzz1">ELEMENT 1</h1>
<h1 class="zzz2">ELEMENT 2</h1>
<h1 class="zzz3">ELEMENT 3</h1>

Kod CSS:

h1 {display: none; }

a.par:focus {color: red}
a.par.cac1:focus ~ h1.zzz1 { display: block; color: blue }
a.par.cac2:focus ~ h1.zzz2 { display: block; color: blue }
a.par.cac3:focus ~ h1.zzz3 { display: block; color: blue }