ml92 ml92 - 3 months ago 17
CSS Question

Why I can't toggle div

I have a little problem, I wan't to toggle div on click, only using HTML5 and CSS3, not JS or jQuery, just HTML5 CSS3.

When click on red area, I wan't to show text under.
Here is what I tried to solve problem, I set :target but not working, also :focus not working.

HTML

<div class="click-me">
<div class="over">
Lorem ipsum dolor sit amet
</div>
</div>


CSS

.click-me{
position:relative;
width: 100px;
height:60px;
background-color:red;
cursor:pointer;
}
.over{
display:none;
position:absolute;
bottom:-50px;
left:0px;
}
.click-me:target .over{
display:block;
}


https://jsfiddle.net/53g22ocs/

Answer

The closest you're going to get (at least I know of) with css only is with the :active selector.

See this JSFiddle

However, don't be afraid of some super simple VanillaJS, JQuery is overkill for this one though in my humble opinion.

Hope this helps, cheers.

ADDITIONAL INFO:

So I was just going by the initial example provided...

If you wanted, you COULD style a checkbox to LOOK like a button and then you have something to tie into with the :checked selector.

Like this CodePen

I thought you were trying to accomplish it with just what you had there but I get the impression you just want a way to do it in pure html/css without any js.

PS, sass still compiles out to just CSS in the end amigo. ;)

Hope this helps.