I want to hide a div container as it clutters my otherwise clean picture display. And I found some javascript – free, CSS only solution: the checkbox hack. Modified it a bit while it looks now like this
<label for="t">license me...</label> <input id="t" type="checkbox" /> <div id="buy">price</div>
input[type=checkbox] {position: absolute; top: -9999px; left: -9999px; } label { border:none; cursor: pointer; } label:hover { border-bottom:1px solid #444; } div#buy { display:none; } input[type=checkbox]:checked ~ div#buy { display: block; }
You get the idea: whenever the label of the unvisible checkbox is being clicked, the display state of the div container is changing between on to off.