JSFiddle - React, Tailwind, and code Playground

by Brian Duffey

HTML

<header>Header</header>
<section>Content</section>

<footer><div class="toggleFooter">Click</div>
    <div class="footer">Footer</div></footer>

CSS

html, body {
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
}
header {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    text-align:center;
    height:50px;
    background-color:red;
}
footer {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    text-align:center;
}
.toggleFooter, .footer {
    background-color:blue;
}
.footer {
    height:50px;
}
.toggleFooter {
    width:60px;
    border-radius:5px 5px 0 0;
}
section {
    margin:50px 0;
    width:100%;
    padding:5px 15px;
    background-color:green;
    height:100%;
}

JavaScript

jQuery(function() {
    jQuery('.toggleFooter').click(function() {
        var pos = parseInt(jQuery('footer').css('bottom'), 10),
            ht = parseInt(jQuery('.footer').css('height'), 10);
        pos = parseInt(pos, 10) * -1 - ht;
        jQuery('footer').animate({ bottom:pos }, 1000);
    });
});