Tag Archives: hide block

How to switch divs on or off – a super neat trick

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.