Slide/fade CSS3

Pure CSS3 animation, JS here is just for explanation, it is not needed.

by Eugene Manager

HTML

<button id='Open'>Open</button><br>
<button id='Close'>Close</button><br>
<div id="toggle">
    <a class="bot" href="#">Push me</a>
    <a class="top" href="#slidebox">Push me</a>
</div>

<div id="box">    
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    </p>
</div>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

CSS

#toggle {
    height:30px;
    position:relative;
    z-index:2;
}

#toggle a { position: absolute;}

#box {
    overflow:hidden;
    max-height:0;
    opacity:0;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    transition: all .4s ease-out;
}

#slidebox:target #box {
    max-height:100px;
    opacity:1;
}

#slidebox:target .top { opacity:0;pointer-events: none;}

/* jsFiddle example page style -- */
body {max-width:600px;margin:0 auto;}
p {padding:14px 40px;}
#box {background:#e2e8ee;}
#toggle a {text-align:center;width:100%;}

JavaScript

$(function() {
			$('#Open').click(function(){
				window.location = '#slidebox';
			});
      
    	$('#Close').click(function(){
				window.location = '#';
			});
});