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

JavaScript

$(document).ready(function(){
    $('#toggleHeader').data('state', 0).bind('click',function(){
        if ($(this).data('state') === 0) {
            $(this).data('state', 1);
            $('#header').stop(true).animate({ top : -102 });
        } else {
            $(this).data('state', 0);
            $('#header').stop(true).animate({ top : 0 });
        }
    });       

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