Slide down div on click Pure CSS?

Question

I found this post How to create sliding DIV on click?

But all the answers are Jquery methods. Is there any way to create this with PURE CSS? I have a couple other things in mind as well...

What can I add to make the slide down div stay put when scrolling
Change the link that triggers the animation to "Close" in order to make the div slide back up

Here is a link to the example in that post// http://shutterbugtheme.tumblr.com/

I've also tried googling but the only results are jquery methods...

score 10 · Answer 1 · edited Dec 05 '22 at 18:53

It can be done, although it's a little bit of a hack. The two elements that retain state (referred to in CSS as :checked) are the checkbox and radio button element. So if you associate a checkbox with a label by using a for attribute and add a div, you can get a result by reading the status of the (hidden) button:

<div class=window>
<input type=checkbox class=toggle id=punch>
<label for=punch>Punch It, Chewie<label>
<div><p>Here’s my content. Beep Boop Blurp.</p></div>
</div>

And the CSS:

input.toggle { display: none; }
input.toggle ~ div { height: 0px; margin: .2rem; overflow: hidden; }
input.toggle:checked ~ div { height: 180px; }

That page doesn't exist. – Andhi Irawan Dec 09 '18 at 03:25 — Andhi Irawan, Dec 09 '18 at 03:25

Kyle · Answer 2 · 2018-12-11T08:24:33.533

6

This is impossible in pure CSS to recognise a click. You can do it with :hover and a transition, but that is as close as you're going to get without javascript.

.hover
{
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.slide
{
    position: absolute;
    top: 0;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
}

.hover:hover + .slide
{
    top: 50px;
}

http://jsfiddle.net/Kyle_/MaMu9/1/

Be aware though that transitions are CSS3 and will not work in IE<9 and older versions of better browsers.

Edit: after another answer was posted using the :focus property in CSS: it is possible with one caveat: you have to click outside of the element that makes it slide down to make it slide up, otherwise it works fine.

Be aware that the element must have tabindex='1' (or any number that makes sense depending on where the element is in the document) for this to work.

.hover:focus + .slide
{
    top: 50px;
    -webkit-transition: top 1s;
}

http://jsfiddle.net/Kyle_Sevenoaks/MaMu9/1/

edited Dec 11 '18 at 08:24

answered Nov 16 '12 at 07:35

Kyle

65,599
28
144
152

This what the accepted answer, but now it's removed. Is there something wrong? – Kyle Dec 09 '12 at 17:00
It "is impossible in pure CSS to recognise a click". You can do so, using the `:focus` hack mentioned in the answer of @lostsource or using a hidden checkbox and an assigned label as trigger element, see: http://codepen.io/surjithctly/pen/pLDwe – feeela Apr 03 '14 at 16:49
1

Pretty sure that if you'd read the entire answer, you'd have figured out that I already mentioned that.. – Kyle Apr 04 '14 at 08:36
1

Despite this question is asked 2 years ago, i wanna say i found (in google) another solution that uses checkbox hack and doesn't use any hardcoded widths or heights, [look](http://jsfiddle.net/lucifer63/c0ntsw3d/) – lucifer63 Apr 04 '15 at 15:44
-1 reason: The checkbox-hack/solution has served me well many times, and I'm helping bring up that answer. Feel free to update this answer and I'll remove my downvote. :) – Alisso Jul 29 '15 at 09:09
That page doesn't exist. – Andhi Irawan Dec 09 '18 at 03:25

score 3 · Answer 3 · answered Nov 16 '12 at 08:09

You can recognize a 'focus' event on an element and act upon it using a CSS transition.

Here's an example which will move a div 50px down when clicked

Markup

<div tabindex='1' id='box'></div>

CSS

#box {
 background-color:#3a6d90;
 width:100px; height:100px;    

 transition: margin-top 2s;
 -moz-transition: margin-top 2s; /* Firefox 4 */
 -webkit-transition: margin-top 2s; /* Safari and Chrome */
 -o-transition: margin-top 2s; /* Opera */
}

#box:focus {
 margin-top:50px;
 outline:0;
}

Working example: http://jsfiddle.net/NBHeJ/

Calvin · Answer 4 · 2012-11-16T07:37:23.080

2

This is a good example of how to get started. You can see at the bottom, they post the source for the animate function they use, although this is javascript.

sliding-js-generic

If you want pure css, I'd use ws3schools has been excellent resource for many years, though be aware that a lot depends on browser support as to whether the effect you want will work or not.

w3schools-css

Basic structure to make the effect they have, you just need to work along the lines of two divs within the body, at the top hidden and the container visible, and run the animation of the hidden div to display pushing the other div down, keeping them both inline.

<body>
 <div id="hidden-div"></div>
 <div id="main-content-div"></div>
</body>

edited Nov 16 '12 at 07:37

answered Nov 16 '12 at 07:29

Calvin

423
3
12

@keihead It's funny that you ask that, considering how css3 animations aren't exactly cross browser yet. ...and as long as js is enabled in a visitors browser, jquery animations work in all major browsers and ie6+, far more bullet proof. – Joonas Nov 16 '12 at 07:37
jquery should work for all major browsers and why was my answer marked down!? there's nothing wrong anywhere with what I said. – Calvin Nov 16 '12 at 07:41
I swear I never meant to mark it down. It was a total accident. I'm guessing you maked my question down for this mistake? – KXXT Nov 16 '12 at 07:53
No... I didn't think it was you and well I'm not like that. – Calvin Nov 16 '12 at 08:00

Danield · Answer 5 · 2013-04-29T09:15:47.223

1

This can be done using the target pseudo class to detect the click.

Set the button href to the id of the sliding div.

The slide down can then be done by setting the height of the sliding div on the slidingDiv :target class using a css3 transition on the height.

I don't think there's a way for the original button to change its href to close the sliding div using pure css, however you could always add a close button on the sliding div to close it.

This close button works by adding the same transition on the sliding div class.

Here is a WORKING DEMO.

Enjoy.

edited Apr 29 '13 at 09:15

answered Apr 29 '13 at 09:09

Danield

121,619
37
226
255

it adds to history back, which would by annoying for user if he clicks browser back button – Ciasto piekarz Feb 11 '17 at 16:18

score 1 · Answer 6 · answered Nov 30 '18 at 22:44

Run This Code.

input {
  display: none;
}

label {
  cursor: pointer;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid;
  border-radius: 4px;
  background: tomato;
  color: #FFF;
  font-family: arial;
  -webkit-transition: background-color 0.1s, color 0.1s;
}

label:hover {
  background: #blue;
  color: #blue;
}

.test {
  -webkit-transition: height .3s ease;
  height: 0;
  overflow: hidden;
  width: 200px;
  background: tomato;
  margin-top: 10px;
  color: #FFF;
}

input:checked + .test {
  height: 100px;
}

<label for="check">Click me</label>

<input id="check" type="checkbox">

<div class="test">
  <p>I am some hidden text</p>
</div>

score 0 · Answer 7 · answered Aug 03 '16 at 03:17

Easy:

.contents {
  background: yellow;
  color: rgba(0, 0, 0, .8);
  padding: 20px;
  margin:0;
}
.slide-up, .slide-down {
  overflow:hidden
}
.slide-up > div, .slide-down > div {
  margin-top: -25%;
  transition: margin-top 0.4s ease-in-out;
}
.slide-down > div {            
  margin-top: 0;
}

Working example: https://jsfiddle.net/webarthur/3ep33h5s/

score 0 · Answer 8 · answered Aug 03 '16 at 03:33

Another way to do the same thing:

.contents {
  background: yellow;
  color: rgba(0, 0, 0, .8);
  padding: 20px;
  margin:0;
}
.slide-up, .slide-down {
  overflow:hidden;
}
.slide-up > div, .slide-down > div {
  transform: translateY(-100%);
  transition: .4s ease-in-out;
}
.slide-down > div {            
  transform: translateY(0);
}

Working example: https://jsfiddle.net/webarthur/3ep33h5s/1/

Slide down div on click Pure CSS?

8 Answers8

Linked