We Keep Coding

The content of website is scrolling above modal when the modal is open

When I open the modal the content of website above and below the modal button also scrolls over the modal.
I tried increasing the z-index and applying overflow property but it didn't work.
<a class=" read-more low-padding raised modal-trigger " data-modal="card-modal">Learn More<i class="im im-icon-Right"></i></a>
<div style="z-index: 99999999999999999999;">
<div id="card-modal" class="modal modal-sm b1" style="overflow-y: hidden">
<div class="modal-background"></div>
<div class="modal-card modal-content">
<header class="modal-card-head">
<p class="modal-card-title">Tracks</p>
<button class="delete is-medium modal-dismiss" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- User -->
<div class="flex-card light-bordered hover-inset padding-10 mb-10">
<div class="content content-flex">
<div class="card-avatar">
<img src="assets/images/ml.png">
</div>
<div class="card-name">
<div class="name">Machine Learning</div>
<!--<div class="position">Software Engineer</div>-->
</div>
<!--
<div class="card-select ml-auto">
<i class="material-icons">done</i>
</div>
-->
</div>
</div>
<!-- /User -->
<!-- User -->
<div class="flex-card light-bordered hover-inset padding-10 mb-10">
<div class="content content-flex">
<div class="card-avatar">
<img src="assets/images/appdev.png">
</div>
<div class="card-name">
<div class="name">Mobile App Development</div>
<!--<div class="position">Sales Representative</div>-->
</div>
<!--
<div class="card-select ml-auto">
<i class="material-icons">done</i>
</div>
-->
</div>
</div>
<!-- /User -->
<!-- User -->
<div class="flex-card light-bordered hover-inset padding-10 mb-10">
<div class="content content-flex">
<div class="card-avatar">
<img src="assets/images/coding.png">
</div>
<div class="card-name">
<div class="name">Generic Coding</div>
<!--<div class="position">Accountant</div>-->
</div>
<!--
<div class="card-select ml-auto">
<i class="material-icons">done</i>
</div>
-->
</div>
</div>
<!-- /User -->
<!-- User -->
<div class="flex-card light-bordered hover-inset padding-10 mb-10">
<div class="content content-flex">
<div class="card-avatar">
<img src="assets/images/webdev.png">
</div>
<div class="card-name">
<div class="name">Web Development</div>
<!--<div class="position">Software Engineer</div>-->
</div>
<!--
<div class="card-select ml-auto">
<i class="material-icons">done</i>
</div>
-->
</div>
</div>
<!-- /User -->
<!-- User -->
<div class="flex-card light-bordered hover-inset padding-10 mb-10">
<div class="content content-flex">
<div class="card-avatar">
<img src="assets/images/cyber.png">
</div>
<div class="card-name">
<div class="name">Cyber Security</div>
<!-- <div class="position">CTO</div>-->
</div>
<!--
<div class="card-select ml-auto">
<i class="material-icons">done</i>
</div>
-->
</div>
</div>
<!-- /User -->
</section>
<footer class="modal-card-foot">
<button class="button is-link modal-dismiss">Close</button>
<!--<button class="button btn-align raised accent-btn no-lh modal-dismiss save-btn is-disabled">Save</button> -->
</footer>
</div>
</div>
</div>
<!-- Featured image -->
<div class="column is-6 is-offset-1 has-text-centered is-hidden-mobile">
<img class="featured-drawing" src="assets/images/illustrations/drawings/gauge.png" alt="">
</div>
When the modal is opened only content of modal should be displayed. No content of the webpage should be scrolling above the modal.

jQuery remove text from h1

I have to build a shoppinglist where I can add and delete lists.
On the right side there is the currently opened list with the list headline.
When deleting a list, the headline should disappear, but it doesn´t, neither with empty(), nor remove() or text(' ').
I just edited the post so you can see the whole HTML code
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="shoppinglist">
<div class="header left">
<h2>Listen</h2>
<i class="glyphicon glyphicon-plus newList" ></i>
</div>
<ul class="list lists">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header right">
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<img src="img/profile.png" alt="profilbild">
</div>
<div id="listbody">
<div class="listheader">
<!--<h1>List 1</h1>-->
</div>
<div id="listitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div id="categorylist">
<div class="header">
<h2>Kategorien</h2>
</div>
<ul class="list categories">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<input placeholder="Was willst du Einkaufen?" type="text" />
</div>
<div id="categoryitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
<div id="producthover_container">
<div id='producthover'>
<div id='producthover_icon'>
<i class='glyphicon glyphicon-plus'></i>
</div>
<div id='producthover_detail'>
<span>Details <br> hinzufügen</span>
</div>
</div>
</div>
</div>
list.js:
printHeader(){
$(".listheader").empty();
$(".listheader").append("<h1 class='h1header'>" + this.name + "</h1>");
}
shoppinglist.js:
$(".lists").on("click","i",(e) =>{
let r = confirm("Delete?");
if(r) {
$(".h1header").remove();
$(e.target).parent().remove();
}
});

you have to Remove it from the parent node. like this:
var child = $(".h1header");
$(".listheader").removeChild(child);
or you will have to create a function that does this when given a child node

jQuery steps with Bootstrap validator

I have a form which validates with bootstrap validator:
http://1000hz.github.io/bootstrap-validator/
I want to separate this form into steps and have each the inputs in each step validate when the next button is clicked and if it validates, then go to step 2.
I believe this can be achieved if we can combine jQuery steps and Bootstrap validator.
http://www.jquery-steps.com/
Like this comment suggests:
https://github.com/1000hz/bootstrap-validator/issues/491
I have been trying to do this but unsuccessful so far. Is there a way?
I have made a JSFiddle for this:
https://jsfiddle.net/mpLpwt7L/
This is my code so far:
<div class="steps-nav">
<div class="row bs-wizard" style="border-bottom: 0;">
<div class="col-xs-3 bs-wizard-step complete step-active">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
1
</a>
<div class="bs-wizard-info text-center">Vehicle details</div>
</div>
<div class="col-xs-3 bs-wizard-step">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
2
</a>
<div class="bs-wizard-info text-center">Location</div>
</div>
<div class="col-xs-3 bs-wizard-step">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
3
</a>
<div class="bs-wizard-info text-center">Type of Wash</div>
</div>
<div class="col-xs-3 bs-wizard-step disabled">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
4
</a>
<div class="bs-wizard-info text-center">Bills</div>
</div>
</div><!-- end bs-wizard -->
</div><!-- end steps-nav -->
</div><!-- end container -->
</header><!-- end header -->
<main id="main">
<div class="container">
<form role="form" class="order-form" method="post">
<div class="row setup-content" id="step-1">
<div class="steps-inner">
<div class="col-md-12">
<h3>Vehicle Details</h3>
<p>
Tell us what are we washing
</p>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<!--<label></label>-->
<input type="text" name="vehicle_year" class="form-control" placeholder="Car Year" data-error="Car Year is required" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
<div class="col-sm-4">
<div class="form-group">
<input type="text" name="vehicle_make" class="form-control" data-error="Make is required" placeholder="Make" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
<div class="col-sm-4">
<div class="form-group">
<input type="text" name="vehicle_model" class="form-control" data-error="Model is required" placeholder="Model" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
</div><!-- end row -->
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="vehicle_color" class="form-control" data-error="Color is required" placeholder="Color" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="plate_number" class="form-control" data-error="Plate number is required" placeholder="Lic Plate" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
</div><!-- end row -->
<div class="text-center form-submit">
<button class="btn next-btn" type="submit">Next <i class="fa fa-long-arrow-right"></i></button>
</div>
</div>
</div><!-- end steps-inner -->
</div><!-- end setup-content -->
<div class="row setup-content" id="step-2">
<div class="steps-inner">
<div class="col-md-12">
<h3>Location</h3>
<p>
Tell us where it is
</p>
<p class="map-address">
<i class="fa fa-map-marker"></i>
<input type="text" name="address" id="address_autocomplete" placeholder="Enter Your Address" />
</p>
<div class="text-center form-submit">
<button class="btn next-btn" type="submit">Next <i class="fa fa-long-arrow-right"></i></button>
</div>
</div><!-- end steps-inner -->
</div>
</div><!-- end setup-content -->

I think bootstrap validator isn't the best solution for your needs. Try to use Twitter Bootstrap Wizard which includes wizard + form validation so you can implement it easily.

jQuery "on" event delegation not working with AJAX call

I'm having trouble with jQuery's on event delegation:
Here's my code:
HTML
<body>
<!-- Page Content Wrapper-->
<div id="sb-site">
<div id="overlay"> </div>
<!-- Ajax loaded here -->
<div id="ajax-loadHeader" class="homeNavbar">
</div>
</div>
<!-- End Page Content Wrapper -->
</body>
JS
$.get("header.html").done(function (data) {
var html = $(data);
var transition = $("#ajax-loadHeader").hasClass("homeNavbar");
if(transition){
html = html.attr("data-transitions","true").addClass("home");
}
$("#ajax-loadHeader").append(html);
$.slidebars({
siteClose: true, // true or false
disableOver: 767, // integer or false
scrollLock: true // true or false
});
});
The problem is on the following functions. None of them are fired when i click the buttons. But, after jQuery 1.7, $(document).on("click","selector",function(){}); should work even for dynamically loaded elements.
I've also tried: $("selector").on("click",function(){});
The
//The element is present on header.html.
$(document).on("click","#mobile-hamburger-menu-open",function(){
$("#overlay").toggleClass("overlay");
$("body").toggleClass("overlayed");
$("#mobile-hamburger-menu-close").removeClass("hide");
$("#mobile-hamburger-menu-open").addClass("hide");
$("#sb-site").addClass("locked");
});
//The element is present on header.html.
$(document).on("click","#mobile-hamburger-menu-close",function(){
$("#overlay").toggleClass("overlay");
$("body").toggleClass("overlayed");
$("#mobile-hamburger-menu-close").addClass("hide");
$("#mobile-hamburger-menu-open").removeClass("hide");
$("#sb-site").removeClass("locked");
});
//The #navbar-top element is present on header.html.
$(document).on("click","#overlay, #navbar-top nav[class*='navbar-default']",function(){
if($("#overlay").hasClass("overlay")){
$("#overlay").removeClass("overlay");
$("body").removeClass("overlayed");
$("#mobile-hamburger-menu-close").addClass("hide");
$("#mobile-hamburger-menu-open").removeClass("hide");
$("#sb-site").removeClass("locked");
}
});
HTML present in header.html
<div id="login-section" class="login-section closed container-fluid">
<div class="row">
<div class="col-md-8 col-sm-6 hidden-xs banner-login">
<div class="row">
<div class="col-md-6 col-sm-12 col-md-offset-6 col-sm-offset-0">
<div class="banner-login-text">
<div class="banner-login-title">
text
</div>
<p>
text
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 no-gutters">
<!-- Login Content -->
<div class="row no-gutters">
<div class="col-md-6 col-sm-6 col-xs-6">
<div id="sou-cliente-btn" class="tab-btn tab-active">
text
</div>
<div class="arrow-tab"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div id="nao-sou-cliente-btn" class="tab-btn">
text
</div>
<div class="arrow-tab"></div>
</div>
</div>
<div class="login-content">
<div class="login-form">
<form id="form-validate-login">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="col-md-3 col-sm-4">E-mail</label>
<div class="col-md-9 col-sm-8">
<input id="usernameField" type="text" data-rule-required="true" class="login-input" placeholder="nome#example.com">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="col-md-3 col-sm-4">Senha</label>
<div class="col-md-9 col-sm-8">
<input id="passwordField" data-inputmask-regex="[a-zA-Z0-9]{8,15}" data-rule-minlength="8" data-rule-maxlength="15" type="password" data-rule-required="true" class="login-input required" placeholder="Digite sua senha">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary"> entrar </button>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12 col-xs-12"> <a class="link-arrow">Esqueci meus dados</a> </div>
</div>
<div class="row no-login">
<div class="col-md-12 col-xs-12"> <span>Se você não possui login:</span> </div>
<div class="col-md-12">
<a class="btn btn-style2"> crie seu primeiro cadastro </a>
</div>
</div>
</div>
<div class="novo-cadastro-section hide">
<span class="nao-cliente-title">text</span>
<br/>
<p class="nao-cliente-subtitle">text</p>
<a class="btn btn-primary">text</a>
</div>
</div>
<!-- End Login Content -->
<div class="row area-login login-especial-input hide">
<div class="col-md-12 col-xs-12">
<select class="col-md-12 col-xs-12 padding15">
<option selected disabled="disabled">Estabelecimento</option>
</select>
</div>
</div>
<div class="col-md-8 nao-cadastrado-section-container hide">
<div class="hidden-xs nao-cadastrado-section">
<div class="row">
<div class="col-md-12"> <span class="nao-cadastrado-title">Não é cadastrado?</span> </div>
</div>
<div class="row nao-cadastrado-description">
<div class="col-md-12"> <span class="">text</span> </div>
</div>
<div class="row nao-cadastrado-btns">
<div class="col-md-6">
<div class="row area-login">
<div class="col-md-12 col-xs-12"> <strong><span class="control-label">Já sou cliente</span></strong> </div>
</div>
<div class="row area-login">
<div class="col-md-12">
<button type="submit" class="btn col-md-12 col-xs-12 primeiro-cadastro-btn"> Criar meu primeiro acesso </button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row area-login">
<div class="col-md-12 col-xs-12"> <strong><span class="control-label">Não sou cliente</span></strong> </div>
</div>
<div class="row area-login">
<div class="col-md-12">
<button type="submit" class="btn col-md-12 col-xs-12 primeiro-cadastro-btn"> Quero testar o gerenciador</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row area-login login-especial-input hide">
<div class="col-md-12">
<div class="input-group"> <span class="input-group-addon login-description"> Código </span>
<input type="text" class="login-input" placeholder="XXXXXXXXXXXX">
</div>
</div>
</div>
</div>
<div class="primeiro-cadastro-section"> </div>
</div>
</div>
<!-- End Login -->
<!-- Header -->
<header id="navbar-top" data-transitions="false">
<div class="container-fluid over-video-container">
<nav class="navbar navbar-default over-video-navbar">
<div class="container">
<!-- Nav Left -->
<div class="col-md-1 col-sm-2 col-xs-7 col-brand">
<div class="navbar-header">
<!-- Menu hamburger -->
<button id="mobile-hamburger-menu-open" type="button" class="mobile-sidebar-menu navbar-toggle collapsed is-closed sb-open-left" aria-expanded="false" aria-controls="navbar">
<div class="label-hamburger"></div>
<div class="icon"></div>
</button>
<button id="mobile-hamburger-menu-close" type="button" class="mobile-sidebar-menu navbar-toggle collapsed is-closed sb-close hide" aria-expanded="false" aria-controls="navbar">
<div class="label-hamburger"></div>
<div class="icon"></div>
</button>
<!-- End Menu hamburger -->
<!-- Logo -->
<a class="navbar-brand" href="index.html" itemprop="url">
<img class="logo-svg" src="images/logo_rede.svg" itemprop="logo">
<!-- Logo PNG for IE8 -->
<img class="logo-png" src="images/logo_rede.png" >
</a>
<!-- End Logo -->
</div>
</div>
<!-- End Nav Left -->
<div class="col-md-4 col-sm-4 col-xs-5 pull-right nav-right-container">
<!-- Nav Right -->
<ul class="nav navbar-nav navbar-right">
<li class="col-md-4 col-md-offset-1 col-sm-5 help col-xs-6">
<!-- AJUDA Ajuda -->
</li>
<li id="my-account-section" class="my-account col-md-7 col-sm-7 col-xs-6"> <a role="button">Minha Conta<span class="arrow hidden-xs hidden-sm"></span></a> </li>
</ul>
<!-- End Nav Right -->
</div>
<div class="col-md-7 col-sm-7 col-xs-12 col-collapse">
<!-- Collapse -->
<div id="navbar-rede" class="navbar-collapse collapse" aria-expanded="false">
<!-- Menu Dropdown -->
<ul class="nav navbar-nav">
<li class="visible-xs">
<div class="col-xs-12 input-group mobile-search-bar-container">
<div class="mobile-search-bar">
<input type="text" class="col-xs-10" placeholder="Digite aqui o que procura..." />
</div>
</div>
</li>
<!-- Produtos -->
<li id="dropdown-produtos" class="dropdown dynamic-image-dropdown">
Nossos Produtos
<!-- Dropdown container -->
<ul class="dropdown-menu dropdown-menu-produtos">
<!-- Links -->
<div class="col-links">
<li data-dropdown-link="0" class="dropdown-item active"> Para celular</li>
<li data-dropdown-link="1" class="dropdown-item"> <a href="#" >Sem fio</a> </li>
<li data-dropdown-link="2" class="dropdown-item"> <a href="#" >Com fio</a> </li>
<li data-dropdown-link="3" class="dropdown-item"> Vendas online </li>
<li data-dropdown-link="4" class="dropdown-item"> <a href="#" >Grandes empresas</a> </li>
<li data-dropdown-link="5" class="dropdown-item"> <a href="#" >Adicionais</a> </li>
<li data-dropdown-link="6" class="dropdown-item"> Todos os produtos </li>
</div>
<div class="col-links">
<li class="dropdown-subitem"> Nome Produto</li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> Nome Produto </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> Nome Produto </li>
</div>
<!-- End Links -->
<!-- Imagem -->
<div class="col-img hidden-sm hidden-xs">
<img data-related-link="0" class="img-active" src="images/menu_maquininha_celular.png" >
<img data-related-link="1" class="" src="images/menu_maquininha_celular_2.png" >
<img data-related-link="2" class="" src="images/menu_maquininha_celular_3.png" >
<img data-related-link="3" class="" src="images/menu_maquininha_celular_4.png" >
<img data-related-link="4" class="" src="images/menu_maquininha_celular.png" >
<img data-related-link="5" class="" src="images/menu_maquininha_celular_2.png" >
<img data-related-link="6" class="" src="images/menu_maquininha_celular_3.png" >
</div>
<!-- End Imagem -->
</ul>
<!-- End Dropdown container -->
</li>
<!-- End Produtos -->
<!-- Tipos Negócio -->
<li id="dropdown-tipos-negocio" class="dropdown dynamic-image-dropdown">
Tipos de Negócio
<!-- Dropdown container -->
<ul class="dropdown-menu">
<!-- Links -->
<div class="col-links">
<li data-dropdown-link="0" class="dropdown-item active"> Restaurantes, Bares </li>
<li data-dropdown-link="1" class="dropdown-item"> Táxis </li>
<li data-dropdown-link="2" class="dropdown-item"> Lojistas </li>
<li data-dropdown-link="3" class="dropdown-item"> Vendedores ambulantes, feirantes </li>
<li data-dropdown-link="4" class="dropdown-item"> Serviços de bem-estar e beleza </li>
<li data-dropdown-link="5" class="dropdown-item"> Lojas online </li>
<li data-dropdown-link="6" class="dropdown-item products-2"> <a href="#">Não encontrou seu tipo de negócio? <br/>
Veja <span class="bold">Nossos produtos</span></a>
</li>
</div>
<!-- End Links -->
<!-- Imagem -->
<div class="col-img hidden-sm hidden-xs">
<img data-related-link="0" class="img-active" src="images/menu_tipos_negocio.jpg" >
<img data-related-link="1" src="images/menu_tipos_negocio_2.jpg" >
<img data-related-link="2" src="images/menu_tipos_negocio_3.jpg" >
<img data-related-link="3" src="images/menu_tipos_negocio_4.jpg" >
<img data-related-link="4" src="images/menu_tipos_negocio_5.jpg" >
<img data-related-link="5" src="images/menu_tipos_negocio_6.jpg" >
<img data-related-link="6" src="images/menu_tipos_negocio_7.jpg" >
</div>
<!-- End Imagem -->
</ul>
<!-- End Dropdown container -->
</li>
<!-- End Tipos Negócio -->
</ul>
<!-- End Nav Right -->
</div>
<!-- End Collapse -->
</div>
</div>
</nav>
</div>
</header>

Solved it.
So freaking simple. Just put the functions inside the done function of the AJAX call.
Thanks for all those who helped me!

My footer content is not in my slidout footer

I can't get my content to fit in my slideout footer. I'm not sure why this is happening. I'm not sure if I have to add it to the JavaScript.
I added the #slideFootercontent to the beginning to everything that I want in the footer, and it's still not working. To be clear, I want the content to slideout with the slideout footer.
I created a codepen.io
<footer>
<div class="navbar-fixed-bottom">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent" class="container ">
<div class="row">
<div class="container">
<div class="row">
<br>
<hr>
<div class="col-lg-4">
<h3>Latest Tweets
</h3>
<div id="example1"></div>
<h4>Watch me on Periscope</h4>
#Erica2385
</div>
<!-- col -->
<div class="col-lg-4 border">
</div>
<!-- col -->
<div class="col-lg-4">
<h3> Subscribe
</h3>
<p>Subscribe for the latest newsletters and updates</p>
<div id="mc_embed_signup" class="mailchimp">
<form action="..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-inline" target="_blank" novalidate>
<div class="form-group">
<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL" placeholder="Enter email">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn__bottom--border mailchimp__btn" data-style="shrink" data-horizontal>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="" style="position: absolute; left: -5000px;"><input type="text" name="..." value=""></div>
</form>
<span class="form_nospam">No spam</span>
</div>
<!--End mc_embed_signup-->
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
<hr class="container">
<div class="container">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
<div class="pull-right">
<iframe width="100" height="20" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/231337268&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>

The problem is that you are styling #footerSlideContainer and #footerSlideContent with position:fixed (that prevents the content from being hidden).
Move the button (#footerSlideButton) outside of #footerSlideContainer, so it shows while that container is hidden and then style the rest appropriately. Check your modified codepen
Note that I changed a few things here and there as you had bad selectors that made some rules useless and also values that created problems.