CSS3 coding for hide and Show

This is hide and show in css.simple css coding for hide and show content if hide click to hide the content and show click to show the content it's toggle concepts 

CSS:


.show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:none; }
@media print { .hide, .show { display: none; } }


html



<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>
</ol>

Demo: 


Here's a list
[hide] [show]
  1. item 1
  2. item 2
  3. item 3
How about that?

Source Code:

<!DOCTYPE html>
<head>
<title>CSS3 coding for hide and Show</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; } }

</style>
</head>
<body>
<p>Here's a list</p>
<div>
<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>
</ol>
</div>
<p>How about that?</p>
</body>
</html>