Slide UP/DOWN on click

HTML

<body>
<div class="footer">
    <br />
<br />
Line 1<br />
Line 2<br />
Line 3<br />
Line 4
</div>

<div class="foot">
Copyright 2014 &copy; Tom Gibbs web design. <div class="clocker">hi</div>

</div>
</body>

CSS

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 0px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f36f21;
}



.foot {
    position:fixed;
    width: 480px;
    z-index: 10000;
    text-align:center;
    height: 70px;
    font-size:18px;
    color: #000;
    background: #ccc;
    display: flex;
    justify-content: center; /* align horizontal */
    left: 0;
    bottom: -20px;
}

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

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

JavaScript

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