Implement existing code to create a slide-out footer

I'm trying to add a slide-out footer. Something similar to GunsNRoses website. I want to have content on the page, but I don't want that to take away from the design. So I want to add a slide-out footer using jQuery. I found this code on [JS Fiddle](https://jsfiddle.net/Nirvana11b/kvz48smq/"slide-out footer") I tried to implement it into my code, but I've run into some difficulties. I'd really appreciate the help. I created a code pen, so you can take a look at the code. Thanks in advance.

 <footer class="navbar-fixed-bottom">

    <div id="footerSlideContainer">
      <div id="footerSlideButton"></div>
      <div id="footerSlideContent">
        <iframe width="40%" height="60" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/226657681&amp;color=999999&amp;auto_play=true&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
        <p class="pull-left hidden-xs"> &copy; Copyright </p>

        <div class="pull-right">
          <div class="navbar-text pull-right">
            <a href="https://www.facebook.com/alwayssunny/?fref=ts" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>
            <a href="https://twitter.com/alwayssunny?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
            <a href="https://soundcloud.com/allisondanger/its-always-sunny-in-philadelphia-intro" target="_blank"><i class="fa fa-soundcloud fa-2x"></i></a>
          </div>
        </div>
       </div>
    </div>
  </footer>

    <script>(function($) {
        var open = false;
        $('#footerSlideButton').click(function () {
            if(open === false) {
                $('#footerSlideContent').animate({ height: '50px' });
                $(this).css('backgroundPosition', 'bottom left');
                open = true;
            } else {
                $('#footerSlideContent').animate({ height: '0px' });
                $(this).css('backgroundPosition', 'top left');
                open = false;
            }
        });     
    });
</script>

Solution

I edited your codepen, and made a few changes, if you apply the jQuery transition to the containing footer with class 'navbar-fixed-bottom' you can apply the slide in easier.

CSS:

.navbar-fixed-bottom {
    position: fixed;
    bottom: -20px;
    height: 0px;
    width: 100%;
    background-color:#ffffff;   
    padding: 10px 0;
}

#footerSlideButton {
    background: orange;
    position: absolute;
    top: -55px;
    right: 20px;
    width:50px;
    height:50px;
    border: none;
    cursor: pointer;
}

jQuery:

var open = false;
$('#footerSlideButton').click(function () {
   if(open === false) {
      $('.navbar-fixed-bottom').animate({ height: '100px' });
      $(this).css('backgroundPosition', 'bottom left');
      open = true;
   } else {
      $('.navbar-fixed-bottom').animate({ height: '0px' });
      $(this).css('backgroundPosition', 'top left');
      open = false;
   }
});

Take a look at my codepen:

http://codepen.io/sshhdaniella/pen/VvBjdZ