Slide UP/DOWN on click

by bizamajig

HTML

<div class="foot">
Copyright 2014 &copy; Tom Gibbs web design. <div class="clocker">hi</div>
<br />
<br />
Line 1<br />
Line 2<br />
Line 3<br />
Line 4
</div>

CSS

.foot {
    border-top: 1px solid #999999;
    position:fixed;
    width: 600px;
    z-index: 10000;
    text-align:center;
    height: 500px;
    font-size:18px;
    color: #000;
    background: #FFF;
    display: flex;
    justify-content: center; /* align horizontal */
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    bottom: -475px;
}

.slide-up
{
    bottom: 0px !important;
}

.slide-down
{
    bottom: -475px !important;
}

JavaScript

$(document).ready(function() {
  $('.foot').click(function() {
      if($('.foot').hasClass('slide-up')) {
        $('.foot').addClass('slide-down', 1000, 'easeOutBounce');
        $('.foot').removeClass('slide-up'); 
      } else {
        $('.foot').removeClass('slide-down');
        $('.foot').addClass('slide-up', 1000, 'easeOutBounce'); 
      }
  });
});