Pure CSS only collapsible elements. How to create accordion without JavaScript

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

http://jsfiddle.net/u3Cjz/

HTML Code:

Tab 1 Tab 2 Tab 3

ELEMENT 1

ELEMENT 2

ELEMENT 3

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 }
Please follow and like us:
error

Published by Piotr Sikora

Piotr Sikora is Front End Team Manager @ Sourceful. MeetJS Kielce Committee member. JavaScript enthusiast. With passion to MTB (http://ckbikers.com)

Leave a comment

Your email address will not be published. Required fields are marked *