Как сделать выдвижной футер?

$('.footer__toggle').click(function(e){ 
  e.preventDefault(); 
  $(this).toggleClass('footer__toggle_active'); 
  $('.footer__inner').slideToggle(); 
})

*{ 
  box-sizing:border-box; 
} 
body{ 
  margin:0; 
  display:flex; 
  flex-direction:column; 
  min-height:100vh; 
} 
header{ 
  height:40px; 
  flex:0 0 auto; 
  background-color:#acd; 
} 
main{ 
  flex:1 1 auto; 
  background-color:#cda; 
} 
footer{ 
  background-color:#dac; 
  padding:40px 0 0; 
  flex:0 0 auto; 
  position:relative; 
} 
.footer__toggle{ 
  display:inline-block; 
  position:Absolute; 
  bottom:calc(100% - 20px); 
  left:calc(50% - 20px); 
  width:40px; 
  height:40px; 
  background-color:#dac; 
  text-align:center; 
  line-height:1.3; 
  font-size:20px; 
  color:#fff; 
  border-radius:50%; 
  text-decoration:none; 
} 
.footer__toggle:before{ 
  content:'\f106'; 
  font-family:fontAwesome; 
} 
.footer__toggle_active:before{ 
  content:'\f107'; 
} 
.footer__inner{ 
  padding:10px 15px; 
  display:none; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<header></header> 
<main></main> 
<footer> 
  <a href="#" class="footer__toggle"></a> 
  <div class="footer__inner"> 
    <p>asda sas asdad fasd dasd asda sda sagssdasdagfsd</p> 
    <p>asda sas asdad fasd dasd asda sda sagssdasdagfsd</p> 
  </div> 
</footer>