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