Slide Down
Structure
<div class="slidedown">
<h1>Your Content</h1>
</div>
<button class="slidebtn">Toggle Slide</button>
Style
<style>
.slidebtn {
background-color:#2ab7a9;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
box-shadow: 0 2px 3px rgba(0,0,0,0.3);
width:100%;
}
.slidebtn:hover {opacity:0.7;}
.slidedown {
text-align:center;
height:260px;
overflow:auto;
color:white;
background:#d1c4e9;
display:none;
}
</style>
Process
<script src="jquery.min.js"></script>
<script>
$(".slidebtn").click(function(){
$(".slidedown").slideToggle("slow");
});
</script>