JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<div id="lookHere">
    <br>
    <br>    
<h1>Huh?!</h1>
<a href="#">test</a></div>
<div>

<div id="footerSlideContainer">
	<div id="footerSlideButton">X</div>
	<div id="footerSlideContent">
		<div id="footerSlideText">
			<h3>Hey! I'm a Sliding Footer</h3>
			<p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
			<p>What can you use me for? Well look at all this stuff:</p>
			<ul>
				<li>Sales information</li>
				<li>Important updates</li>
				<li>Unobtrusive about panel</li>
				<li>Or just a good ol' footer</li>
			</ul>
			<p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
		</div>
	</div>
</div>

CSS

body {
	margin:0;
	padding:0;
	background: #EFEFEF;
}
#footerSlideContainer {
	position: fixed;
	bottom:0;
	width: 100%;
}
#footerSlideButton {
	background: url(sliderButton.png) top left no-repeat transparent;
	position: absolute;
	top: -55px;
	right: 20px;
	width:50px;
	height:50px;
	border: none;
	cursor: pointer;
}
#footerSlideContent {
	width: 100%;
	height: 0px;
	background: #251b15;
	color: #CCCCCC;
	font-size: 0.8em;
	border: none;
	font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideContent h3 {
	font-size: 36px;
	color: #9AC941;
	margin: 10px 0 10px 0;
}
#footerSlideContent ul {
	color: #EE8D40;
	list-style-type: none;
	line-height: 2em;
}
#footerSlideText {
	padding: 15px 10px 25px 25px;
}
#lookHere {
	font-family: DejaVuSansBook, Sans-Serif;
}
#lookHere h1, #lookHere h2 {
	font-size: 19px;
	padding: 0;
	margin: 0;
	color: #AAAAAA;
}
#lookHere h2 {
	font-size: 15px;
	margin: 0 0 0 30px;
}
#lookHere span.orange {
	color: #EE8D40;
}
#lookHere span.green {
	color: #9AC941;
}

JavaScript

jQuery(function($) {
		var open = false;
		$('#footerSlideButton').click(function () {
			if(open === false) {
				$('#footerSlideContent').animate({ height: '300px' });
				$(this).css('backgroundPosition', 'bottom left');
				open = true;
			} else {
				$('#footerSlideContent').animate({ height: '0px' });
				$(this).css('backgroundPosition', 'top left');
				open = false;
			}
		});		
	});