CODEWITHSUNDEEP
htmlcss
Ryan Rich
Ryan Rich

Reputation: 12055

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.

Upvotes: 3

Views: 19941

Answers (2)

user1823761
user1823761

Reputation:

Working FIDDLE Demo

Consider that you want something like this:

enter image description here

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:

enter image description here

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.

enter image description here

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;
}

enter image description here

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.

enter image description here

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

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

enter image description here

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.

enter image description here

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;
}

enter image description here

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.

Working FIDDLE Demo

Upvotes: 19

Christofer Vilander
Christofer Vilander

Reputation: 18022

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/

Upvotes: 2

Related Questions