JSFiddle - React, Tailwind, and code Playground

by jglodek

HTML

<a href="#" class="header">header</a>
<a href="#" class="footer">footer</a>
<header style="margin-top:-100px">
    <h1>header</h1>
</header>


<footer>
    <h1>footer</h1>
</footer>

CSS

header{
    position: absolute;
    height: 50px;
    width: 100%;
    background: red;
}

footer{
    display: none;
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 100%;
    background: red;
}

JavaScript

jQuery(function ($) {
    var a = true;
	$('.header').on('click', function(){
        if(a){
            $('header').animate({"margin-top":"0px"});
        }else{
            $('header').animate({"margin-top":"-100px"});
        }
        a=!a;
	});

	$('.footer').on('click', function(){
		$('footer').slideToggle(200);
	});
    
});