Is it possible to show a div on click using the :active selector in CSS?

Question

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

Answer 1

Consider that you want something like this:

---

We write our markup as simple as possible. One element for container , one element for our link and one another element for popup :

<!-- [container] -->
<div class="link-with-popup">

    <!-- link -->
    <div class="link">CSS</div>

    <!-- [popup] -->
    <div class="popup">
        <div class="box">CSS Description</div>
    </div>
    <!-- [/popup] -->

</div>
<!-- [/container] -->

Here is our layer structure in picture:

---

CONTAINER

Let's write CSS for our container.

.link-with-popup {
    /* for visualizing */
    background: yellow;

    /* we need relative, because childs are absolute */
    position: relative;

    margin-bottom: 10px;
    height: 30px;
    width: 400px;
}

• [!] Note that we make our container relative . Because the children will be in absolute mode.

---

LINK

We create our link as an absolute element from left, just as shown in the figure above.

.link {
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100px;
    z-index: 10;
}

---

POPUP

The dimention of popup element is same as the container, so we set all top , left , right , bottom properties to 0 .

.popup {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: green;
        z-index: 20;
    }

• [!] Note that z-index of popup element must be greater than link element.

.popup {
        /* we won't show the popup yet */
        display: none;
}

By now, we'll get this result ( check it on jsFiddle ):

---

Now we want the click for our link. This must be done with :active pseudo selector in CSS. But how we must show the poup ? We have to get the next sibling element by the link . We use the + selector in CSS:

.link:active + .popup {
    display: block;
}

See the result on jsFiddle . But the problem is that when user realize the mouse, the popup will disappear (as it display is set to none ). So we set the :hover rule for the popup and make it block .

.popup:hover {
    display: block;
}

Check the jsFiddle demo . Now we get close enough. The only issue that the popup element, hide our link . But it doesn't matter, because we won't set background for our popup (it will be transparent ).

---

TEXT

For wanted text in popup element, we set this rules:

.popup .box {
    position: absolute;

    /* note that we make a gap from left to don't hide the link */
    left: 130px;
    top: 0;
    right: 0;
    bottom: 0;
    background: #505050;
}

Check the jsFiddle demo . Now we have all things that we need.

---

Now it's time to make our popup element transparent (by setting the background as transparent or simply remove the background: green; rule):

.popup {
    background: transparent;
}

---

And here is the final jsFiddle result . And if you add some extra CSS to it, it can be more stylish. Something like this that I've created.

Some important note to memorize:

• In the final result, there is a gap between the link (blue one) and the popup (gray one). But the fact is that the gray element is not our popup . It's a child of popup and our popup is an 100% width and height element on the container.

Answer 2

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/