slide in from down

by John Doe

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer">
   <div class="box" id="first_box">
     <a class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
     <h2>First</h2>
   </div>
      <div class="box" id="second_box">
     <a class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
     <h2>Second</h2>
   </div>
      <div class="box" id="third_box">
     <a class="close"><i class="fa fa-times" aria-hidden="true"></i></a>
     <h2>Third</h2>
   </div>
   <div class="btns">
      <a id="first_button" href="#">
         <i class="fa fa-user-circle-o" aria-hidden="true"></i>
      </a>
      <a id="second_button" href="#">
        <i class="fa fa-bookmark" aria-hidden="true"></i>
      </a>
      <a id="third_button" href="#">
        <i class="fa fa-bug" aria-hidden="true"></i>
      </a>
   </div>
</div>

CSS

*, *:after, *:before{
  box-sizing: border-box;
}
html, body{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.footer{
  position: fixed;
  bottom: 0px;
  width: 100%;
}
.footer .btns{
  height: 50px;
}
.footer .btns a{
  text-decoration: none;
  color: #ffffff;
  width: 33.333%;
  height: 100%;
  background-color: #73BAF8;
  display: block;
  float: left;
  line-height: 50px;
  text-align: center;
  box-shadow: 0 0 1px rgba(0,0,0,0.3);
}
.footer .btns a.active{
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
  background-color: #6fabe1;
}
.footer .btns a:hover{
  box-shadow: 0 0 1px rgba(0,0,0,0.9);
  background-color: #74B2ED;
}
.box{
  padding: 15px;
  margin: 0 1px 0 0;
  border: 1px solid rgba(114, 184, 248, 0.2);
  height: calc(100vh - 51px);
  background-color: rgb(138, 176, 211);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: none;
}

.close{
    background-color: #ffffff;
    border: 2px solid #73baf8;
    border-radius: 100%;
    color: #73baf8;
    display: block;
    float: right;
    font-size: 14px;
    height: 25px;
    line-height: 20px;
    text-align: center;
    width: 25px;
    cursor: pointer;
}

JavaScript

$('#first_button').click(function(){
	if($('#first_button').hasClass('active')){
		$('.box').slideUp('2000');
  	$('.btns a').removeClass('active');
  } else{
  	$('.box').slideUp('2000');
  	$('.btns a').removeClass('active');
  	$('#first_box').delay(200).slideDown('2000');
  	$('#first_button').addClass('active');
  };
});
$('#second_button').click(function(){
	if($('#second_button').hasClass('active')){
		$('.box').slideUp('2000');
  	$('.btns a').removeClass('active');
  } else{
  	$('.box').slideUp('2000');
  	$('.btns a').removeClass('active');
  	$('#second_box').delay(200).slideDown('2000');
  	$('#second_button').addClass('active');
  };
});
$('#third_button').click(function(){
	if($('#third_button').hasClass('active')){
		$('.box').slideUp('2000');
  	$('.btns a').removeClass('active');
  } else{
  	$('.box').slideUp('2000');
  	$('.btns a').removeClass('active');
  	$('#third_box').delay(200).slideDown('2000');
  	$('#third_button').addClass('active');
  };
});
$('.close').click(function(){
	$('.box').slideUp('2000');
  $('.btns a').removeClass('active');
});