Victa/slide.html

## slide.html
<!doctype html>
<html>
<head>
<title>Slide CSS3</title>
<meta charset="UTF-8">
<style>

	body {background:#FFF;text-align:center;font-family:sans-serif;}
	p {margin:10px 150px;}

	#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;
	    background:#e2e8ee;
	}

</style>
</head>
<body>

	<input type="submit" onclick="slide();" value="Push me" />

	<div id="box">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
			</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>

	<script>
	var box = document.getElementById('box');

	function slide() {
		if(box.style.maxHeight != "100px") {
			box.style.maxHeight = "100px";
			box.style.opacity = "1";
		} else {
			box.style.maxHeight = "0";
			box.style.opacity = "0";
		}
		return false;
	}
	</script>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Slide CSS3</title>
	<meta charset="UTF-8">
	<style>

	body {background:#FFF;text-align:center;font-family:sans-serif;}
	p {margin:10px 150px;}

	#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;
	background:#e2e8ee;
	}

	</style>
	</head>
	<body>

	<input type="submit" onclick="slide();" value="Push me" />

	<div id="box">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
	</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>

	<script>
	var box = document.getElementById('box');

	function slide() {
	if(box.style.maxHeight != "100px") {
	box.style.maxHeight = "100px";
	box.style.opacity = "1";
	} else {
	box.style.maxHeight = "0";
	box.style.opacity = "0";
	}
	return false;
	}
	</script>

	</body>
	</html>