Hide Show content-list with only CSS, no javascript used

Question

I\'ve been searching for a good trick to make a Hide/Show content or a list with only CSS and no javascript. I\'ve managed to make this action:

Answer 1

A very easy solution from cssportal.com

If pressed [show], the text [show] will be hidden and other way around.

This example does not work in Chrome, I don't why...

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

[hide] [show]

item 1
item 2
item 3