<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Demo Div display + cookies</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'>
<!--Библиотека JQuery-->
<script type='text/javascript'
src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">
<!--Библиотека JQuery cookies, у кого не сработает, в названии точку заменить на '_',
если будут проблемы с компиляцией в Visual Studio - расположить ссылку на эту
библиотеку внизу документа, желательно установить async-->
</script>
<script type='text/javascript'>
$(function() {
var state = $.cookie('state');
var open = state == "open";
$("#toolo").toggle(open);
$("#toolo2").toggle(!open);
$(".toggle").on("click",function(e){
e.preventDefault();
var open = this.id=="show";
console.log(open,this.id)
$("#toolo").toggle(open);
$("#toolo2").toggle(!open);
$.cookie('state', open?"open":"closed", { expires:3 });
});
});
</script>
</head>
<body>
<div id="toolo"> text 1
<button class="toggle" id="hide">Open</button>
</div>
<div id="toolo2">
text 2
<button class="toggle" id="show">Hide</button>
</div>
<div class="paddingchange" style="padding:25px 35px 0 275px" id="paddingdiv">
Этот див при нажатии кнпки Hide должен сдвигать паддинг на лево на '-275px'
А при нажатии на Show возвращать всё как было
</div>
</body>
</html>
|