CODEWITHSUNDEEP
htmlcss
ml92
ml92

Reputation: 451

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/

Upvotes: 1

Views: 175

Answers (5)

SreYash
SreYash

Reputation: 111

Here's my simple try...

.click-me{
  position:relative;
  width: 50px;
  height:60px;
  background-color:red;
  cursor:pointer;
}
 .div {position:fixed;
  width: 100px;
  height:60px;
  background-color:red;
  cursor:pointer;
  text-align:right;
  }
.over{
  display:none;
  position:absolute;
  bottom:-120px;
  left:0px;
  background: blue;
  color: white;
  font-size:15px; 
}
.click-me:focus .over{
  display:block;
}
<button class="div">hide
<button class="click-me">show
   <div class="over">
      This is done with Html and Css!!!
      Now,Click hide to hide me!!!
   </div>
</button>

When 'show' Button is focused the text displays and after clicking on hide button,'show' button loses its focus and text hides.

Upvotes: 0

Cory J.
Cory J.

Reputation: 392

If it's acceptable to use <a> tags to target your divs, you can do that.

.tab div {
  display: none;
}

.tab div:target {
  display: block;
}
<div class="tab">
  <a href="#link1">Click Me</a>

  <div id="link1">
    <h3>Content</h3>
    <p>
      Put stuff here.
    </p>
  </div>
</div>

EDIT I guess I misunderstood the question. Try below.

body {
  margin: 1em;  
}

#check-button {
  display: none;
}

#link1 {
  margin-top: 10px;
  background-color: red;
}

#check-button:checked + #button + #link1 {
  display: none;
}


#button {
  background-color: yellow;
  display: inline-block;
  padding: 2px 5px;
  cursor: pointer;
}
<input type="checkbox" id="check-button">
<label id="button" for="check-button">Click Here</label>
<div id="link1">
  <h3>Content</h3>
  <p>Put stuff here.</p>
</div>

Upvotes: 0

Pat
Pat

Reputation: 2750

Using a hidden checkbox you can achieve this. Here is a working example:

https://jsfiddle.net/cf1ht61w/

Basically you have a hidden checkbox offscreen and a label that is associated with it that will cover your clickable box. When you click the box, you are actually clicking the label, which checks the checkbox and changes the css of the sibling element. 

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

#toggleBox  {
position: absolute;
z-index: -1;
left: -1000000000px;
top: 1000000000px;
visibility: hidden;
height: 0;
width: 0;
}
#toggleLabel{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#toggleBox:checked + .over{
  display:block;
}
<div class="click-me">
<label for="toggleBox" id="toggleLabel"></label>
<input type="checkbox" id="toggleBox">
   <div class="over">
      Lorem ipsum dolor sit amet
   </div>
</div>

Upvotes: 2

Chris W.
Chris W.

Reputation: 23290

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.

Upvotes: 3

rmarif
rmarif

Reputation: 548

there is no click event in CSS3. though you can accomplish it by input check-box checked .. but you need a click event with jQuery.

Upvotes: 0

Related Questions