Выдвижной Footer

Делаем выдвижной (раскрывающийся) Footer. Можно использовать для различных целей, например, показать какаю-либо вспомогательную техническую информацию.

Вставляем в FOOTER элемент, при нажатии на который он должен выдвигаться

<div id="footer" name="footer">

<div id="footer-open" >Открыть <i class="fa fa-arrow-up"></i></div>

</div>

CSS

#footer {
	margin-top: -50px;
	padding: 0 10%;
	background-color: rgba(0, 0, 0, 0.7);
	height: 50px;
	width: 80%;
	float: left;
	color: #fff;
	box-shadow: 0px 0px 16px #000;
	overflow: hidden;
	position: relative;
	text-align: center;
	z-index: 99;
	transition: margin-top 0.5s, height 0.5s;
}

#footer-open {background-color: coral; padding: 5px; position: absolute; cursor: pointer;}

.open3 {margin-top: -150px !important; height: 150px !important;}

Script

$(document).ready(function() { 
 
//Раскрытие футера 
 
$('#footer-open').click(function() {
$('#footer').toggleClass('open3'); 
}); 
 
//Изменение содержимого diva при нажатии 
 
$("#footer-open").toggle(
function () {$("#footer-open").html('Закрыть <i class="fa fa-arrow-down"></i>');},
function () {$("#footer-open").html('Открыть <i class="fa fa-arrow-up"></i>');}
); 
 
});

Запоминание состояния открыт / закрыт (cookie)

+ Изменение состояния кнопки

$(document).ready(function() { 
  
	// Раскрывающийся футтер (+ Cookies)  
  
    var body_class = $.cookie('underground-btn');
    var body_class2 = $.cookie('underground');
	if(body_class) {
        $('#footer-open').attr('class', body_class);
		$('#underground').attr('class', body_class2);
	}
	
    $('#footer-open').click(function() {
	
	    $('#footer-open').toggleClass('footer-open-open');
        $('#underground').toggleClass('underground-open');
		
        $.cookie('underground-btn', $('#footer-open').attr('class'), { expires: 1, path: '/' });
		$.cookie('underground', $('#underground').attr('class'), { expires: 1, path: '/' });

    }); 
	
	$('#footer-open').click(function() {
		$("html, body").animate({scrollTop:$(document).height()},2000); return false; // функция перемотки вниз 
	});     
  
});

CSS изменяющейся кнопки

#footer-open {
    padding-top: 10px;
    text-align: center;
    position: relative;
    float: left;
    width: 100%;
    cursor: pointer;
    transition: color 0.5s ease, background-color 0.5s ease;
    -webkit-transition: color 0.5s ease 0s, background-color 0.5s ease 0s;
}

#footer-open:after {content: "открыть"; position: relative;}

.footer-open-open {display:block;}

.footer-open-open:after {content: "закрыть" !important; position: relative !important;}

Упрощенный вариант (без cookie)

Назначается на любой объект нажатия (выделено ниже)

$(document).ready(function() { 
  
// Раскрывающийся футтер
    $('#wp_usage').click(function() {
        $('#underground').toggleClass('underground-open');
	$("html, body").animate({scrollTop:$(document).height()},2000); return false; // функция перемотки вниз 
    }); 
	
});

Изменения текста кнопки

Простой скрипт изменения текста на кнопке при нажатии

$(function(){
   $('#bron').click(function(){
		var text = $(this).text();
		$(this).text(text == "Закрыть форму брони" ? "Забронировать номер" : "Закрыть форму брони");
    })
});

То же самое только изменение иконки

$(function(){
   $('#menu-icon').click(function(){
		var text = $(this).html();
		$(this).html(text == '<i class="fa fa-bars"></i>' ? '<i class="fa fa-times"></i>' : '<i class="fa fa-bars"></i>');
    })
});

[site-socialshare]