Is It Possible To Show A Div On Click Using The :active Selector In CSS?

I'm looking to show a div on click. The goal is to use pure CSS only, no jQuery.

Solution 1:

Another way is to use the :target property (only works in moderns browsers).

Here's a qucik DEMO where I've hidden the div by applying opacity: 0; and the when you click the link the div changes to opacity: 1; The link and the div are matched using a hash in the url.

Here's the code from my example.

HTML

<a href="#pop">Click me</a>
<br />
<div id="pop"></div>

CSS

#pop {
  width: 100px;
  height: 100px;
  background: #000;
  opacity: 0;
}

#pop:target {
  opacity: 1;
}

There are some side effects though. The browser will jump/scroll down (not sure if it's possible to prevent this?) to the matched div and since we are using a hash in the url it will effect the browser history and, as mentioned above, it only works in modern browsers.

EDIT If you want to look into other hack/tricks for pure CSS click events, this is a good post - http://tympanus.net/codrops/2012/12/17/css-click-events/