css3 onClick using :target

If you haven’t come across the :target psuedo class yet you may have missed a trick, its a great piece of css that can give you a more active page without the need of javascript. The easiest way to imagine this working is to actually think of click events in javascript. Lets say you have a href link with an onClick event attached to it. Clicking this triggers some javascript to show a div somewhere in the page. To do this in javascript you might have some code like this

<a href="#" onClick="document.getElementById('box1').style.display='block'">Click Me</a>
<div id="box1" style="display:none;">test test</div>

Well this very same functionality is available using just the :target css and to great effect. Take this code below as an example, here we can do exactly the same as the javascript but now just with css.

<style type="text/css">
    	#box1 {
    		display:none;
    	}
    	#box1:target {
    		display:block;
    	}
</style>
    
<a href="#box1">Click Me</a>
<div id="box1">test test</div>

Of course there are the usual browser limitations but consider combining this with javascript as a fallback and you can have a more future proof native version of your code. Combine this with some of the css animation effects and you can have something that would easily fool others into thinking its made with javascript when in fact its css.