Checkbox Hack

dabblet.css

/* Checkbox Hack */

input[type=checkbox] {
display:none;
}
label { 
  display: inline-block;
  cursor: pointer;
}



/* Default State */
div {
	display: none;
}

/* Toggled State */
input[type=checkbox]:checked ~ div {
   background: #e3f;
   display:block;
}


:root input[type=checkbox]:checked + label{
font-weight:bold;
}

:root input[type=checkbox]:checked + label:after{
content: "<<";
}


:root input[type=checkbox] + label:after{
content: ">>";
}

label:hover{
color: #3bc;
font-weight:bold;
}

dabblet.html

<ol>
	<li>
	
		<input type="checkbox" id="toggle-1">
		<label for="toggle-1">I'm a toggle</label>
		<div>I'm controlled by toggle. No JavaScript!</div>
	</li>	
	
	<li>
	<input type="checkbox" id="toggle-2">
	<label for="toggle-2">I'm a toggle</label>
	
			
		<div>
		I'm controlled by toggle. No JavaScript!
		<a href="http://google.com" target="_blank">test</a> 
		</div>
	</li>

</ol>

settings.json

{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}