CSS stay in that position on click

Question

I need to do this in only CSS not in jQuery, is there a way that, when I click on a div I can say in CSS that a other div have to be display: block;?

I only used :active, but it wasn't what I needed, so I hope you guys know an other way to do this :)

PS: NOT IN jQuery!

Code:

.dropdown-submenu:active > .dropdown-menu {
    display: block;
}

Possible duplicate of [Can I have an onclick effect in CSS?](http://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css) — Vucko, Apr 06 '16 at 06:45
Ye I saw this post, but I could't use it. its just like the sub-menu have to displayed also when mouse is up not only on mousedown. — , Apr 06 '16 at 07:46

Sang Dang · Answer 1 · 2016-04-06T08:30:56.683

0

You can use Checkbox trick

<input type="checkbox" id="toggle">
<label for="toggle">Click me!</label>
<div class="dropdown-menu">Contain</p>


.dropdown-menu {
    display: none;
}

input[type=checkbox]:checked ~ .dropdown-menu {
    display: block;
}

input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

label {
    display: block;
    font-weight: bold;
}

The Focus way:

<span tabindex="0">Click button</span>
<div class="dropdown-menu">Contain</p>

span:focus ~ .dropdown-menu {
    display: block;
}

You can hide the checkbox using position or display none. See more detail with demos here http://tympanus.net/codrops/2012/12/17/css-click-events/

edited Apr 06 '16 at 08:30

answered Apr 06 '16 at 06:49

Sang Dang

501
1
11
26

I not realy get the way of checkbox :s – Apr 06 '16 at 07:46
Lenap, I edited. The idea is when you click on label, it turns the checkbox on/off. – Sang Dang Apr 06 '16 at 08:32

CSS stay in that position on click

1 Answers1