Slide down

by 8ogdan

HTML

<div id="button">Button</div>
<div id="menu">This is the menu</div>

CSS

body {
  background-color: #f3f3f3;
}

#button {
  padding: 20px 12px;
  background: gray;
  width: 100px;
  text-align: center;
  cursor: pointer;
  border-radius: 2px;
  color: #fff
}

#menu {
 background:#42bdc2;
 height:30px; 
 color: #fff;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   font-family: arial;
   padding-top: 5px;
   padding-bottom: 5px;
}

JavaScript

$("#button").click(function () {
  if ($("#menu").css("height")=="30px") {
    $("#menu").animate({"height":"500px"}, 500);
  } else {
    $("#menu").animate({"height":"30px"}, 500);
  }
});