how to make slide up default open with jquery script?

Question

I found this script on stackoverflow, and really helped me. I have tried to make it default open (default slide up), without eliminating slide down. But I did not succeed. Can anyone help me for correction? Thank you so much.

$(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');
    }
  });
});

.foot {
  border-top: 1px solid #999999;
  position: fixed;
  width: 600px;
  z-index: 10000;
  text-align: center;
  height: 300px;
  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: -275px;
}

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

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

<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>

Answer 1

You can simply add the class slide-up to <div class="foot"> like this:

<div class="foot slide-up">

or you can also do it on page load with jQuery:

$('.foot').addClass('slide-up');

Here is the code:

$(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'); 
      }
  });
});

.foot {
    border-top: 1px solid #999999;
    position:fixed;
    width: 600px;
    z-index: 10000;
    text-align:center;
    height: 300px;
    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: -275px;
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foot slide-up">
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>