JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<div data-role="page">    
    <div id="header" data-role="header" data-position="fixed" data-tap-toggle="false">
         <h1>Header</h1>
    </div>
    
    <div data-role="content">
        <a id="toggleHeader" data-role="button">Toggle Header</a>
        <a id="toggleFooter" data-role="button">Toggle Footer</a>
    </div>
    
    <div id="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
            <h1>Footer</h1>
    </div>
</div>

CSS

#header, #footer {
    height: 100px; 
}


#header .fixedHeight{
    position: absolute;
    bottom: 0; left: 0;
    height: 100px;
    width: 100%;
}

JavaScript

$(document).ready(function(){
    
    $('#header h1').wrap('<div class=fixedHeight>');
    
    $('#toggleHeader').bind('click',function(){
        $('#header').slideToggle(3000);
    });       

    $('#toggleFooter').bind('click',function(){
        $('#footer').slideToggle(3000);
    });        
});