Div focus using css

Question

HTML

<div class="div1">
    <ul class="dropdown">
       <li>example</li>
    </ul>
<div>

CSS

.dropdown{
    visibility: hidden
}
.div1:focus .dropdown{
    visibility: visible
}

I'm trying to make click event in css using focus without jquery and I need it when I am clicking on div1 it will hide a dropdown ul.

Is there any way to do that?

If this div was an anchor, then there is :visited would have helped you. In case of div, need to think. — Nikhil Aggarwal, Jun 14 '15 at 17:28
possible duplicate of [Show / hide div on click with CSS](http://stackoverflow.com/questions/6019845/show-hide-div-on-click-with-css) — ᔕᖺᘎᕊ, Jun 14 '15 at 17:29

score 2 · Answer 1 · answered Jun 16 '15 at 20:47

You can't do that with "focus", but you may do that with "active". Active is accepted by most browsers as the "click" event (i.e. while you click on an element it is active). Check the code below. I have just tested with Chrome and it works as you intended. Also tested with Internet Explorer; it "sort-of" works with this too (the second selector is specifically for IE).

Hope this helps you out. Good luck!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Title Goes Here</title>
<style>
 body {background-color:lightgray}
 h1   {color:blue}
 p    {color:green}
 .div1 {
  border: 1px solid green;
 }
 .div1:active .dropdown {
  display: none;
 }
 .dropdown:active {
  display: none;
 }
</style>
</head>
<body>
<p>This is my web page</p>
<div class="div1">
 test
    <ul class="dropdown">
       <li>example</li>
    </ul>
<div>
</body>
</html>

I have done this before and i do not like the result that you have to hold so in the end i'm decided using jquery but thanks for helping. — Ab Le, Jun 16 '15 at 20:54
that would be the best advice if you are able to run jquery on the clients. thanks for the quick reply :) — George, Jun 16 '15 at 21:25

score 0 · Accepted Answer · answered Jun 14 '15 at 17:40

What about using javascript

<div id="div1">
    <ul class="dropdown" id="ul1">
       <li>example</li>
    </ul>
<div>

<style>
.hidden {
    visibility: hidden;
}
</style>

<script>
document.getElementById('div1').onclick=function(){
   var element = document.getElementById("ul1");
    element.classList.add("hidden"); 
};
</script>

JSFiddle: http://jsfiddle.net/4Ls0ygp3/

Div focus using css

2 Answers2

Linked