Slide Down

Your Content


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>


receipt
settings_ethernet