hideshow footer triangle

by mrjordy

HTML

<span class="sidewaystemp">-------- Click the triangle at the bottom --------</span>
<div class="fArrow"></div>
<div class= "stickyfooter">Ventor specific stuff goes here<br>For example, the JE Pistons page may have <br>"Piston Overstock" or maybe "Pistons by Make"</div>

CSS

.stickyfooter {
	position: absolute;
	display: none;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50%;
	background: rgba(0, 0, 0, 0.69);
    color:white;
    padding-top:14px;
    text-align: center;   
}

.fArrow {
    width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid black;
    color:white;
    opacity:.7;
	position: absolute;
	bottom: 0;
	display: block;
	cursor: pointer;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-ms-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
}
.fArrow:before {
    content: "+";
    margin-left: -4px;
}
.fArrow:hover {
    opacity:1;
    border-left: 26px solid transparent;
	border-right: 26px solid transparent;
	border-bottom: 26px solid black;
    margin-left:-6px;
}

.fArrow.current {
	bottom: 50%;
    transform: rotate(-135deg);
    margin-bottom:11px;
    margin-left:-21px;
    border-bottom: 20px solid red;
}
.fArrow.current:hover {
    border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid red;
    margin-left:-21px;
}
.fArrow.current:before {
    content: "+";
    margin-left: -5px;
    line-height: 16px;
}

JavaScript

function stickyfooter() {
	var footerH = $('.stickyfooter');
	var fH = footerH.height();

	$('.fArrow').on('click', function() {
		$(this).toggleClass('current');
		$('.stickyfooter').slideToggle(200);
	});
}

stickyfooter();