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...

1. What can I add to make the slide down div stay put when scrolling
2. 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...

Answer 1

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; }

A further explanation and example that includes an animated open/close effect.