Pure CSS Magic: Create Collapsible Elements and Accordion Without JavaScript

Read Time:35 Second

Pure CSS collapsible (with on click) containers / elements / whateva.

http://jsfiddle.net/u3Cjz

HTML Code:

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

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

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

CSS Code:

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 }