HTML
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Slide Transition Up and Down</title>
<meta name="keywords" content="slideup,slidedown,css transition,css slideup, css sliddown, css slide" />
<meta name="description" content="CSS Slide Transition: It's pure css slide transition that slide down and up when user click on toggel button. This way allow you to show more info of your website." />
<meta name="author" content="Codeconvey" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://codeconvey.com/Tutorials/css-slide-transition/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://codeconvey.com/Tutorials/css-slide-transition/css/style.css" />
</head>
<body>
<input type="checkbox" name="toggle" id="toggle" />
<label for="toggle"></label>
<div class="slidecontainer">
<h1>CSS Slide Transition</h1>
<h2>CSS Slide Transition Down and Slide Up</h2>
</div>
<div class="message">
<div class="container">
<!-- Top Navigation -->
<div class="codeconveyTop clearfix">
<ul>
<li><a href="http://codeconvey.com/Tutorials/css-slide-transition/"><span>Previous Demo</span></a></li>
<li><a href="http://codeconvey.com/css-transition-slide-down-slide-up/"><span>Go to Article</span></a></li>
</ul>
</div>
<h1 class="text-center"> hello, I'm a hidden message. You found it.</h1>
<h2 class="text-center">Click the Slide up button in the bottom to close it.</h2>
</div>
</div>
<section>
<div class="codecontainer">
<div class="content">
<p>The CSS Slide Transition are made by using purely css only. This effect allow users to show more information in quick way. This is one toggel button transition effect that allow to close or open the div.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
</div>
</div>
</section>
</body>
</html>
