Ребята, подскажите, пожалуйста, почему при обновлении страницы не запоминается активный блок.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>accordion</title>
<link rel="stylesheet" href="css/normalize.css">
<style>
.accordion {
width: 600px;
margin: 20px auto;
}
.accordion__question {
background: #F6F6F6 url("../images/plus.png") no-repeat 8px center;
padding: 10px 10px 10px 40px;
margin: 0 0 1px 0;
color: #000;
font-size: 20px;
border-radius: 5px;
cursor: pointer;
}
.accordion__question:hover {
background-color: #DFE4E8;
}
.accordion__question_open {
background-image: url("../images/minus.png");
}
.accordion__answer {
padding: 0 8px;
}
</style>
</head>
<body>
<div class="accordion">
<h2 class="accordion__question" data-id="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<div class="accordion__answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ipsa, sunt, dignissimos quisquam cum, repudiandae ratione distinctio odio, suscipit voluptatem est deleniti maxime dolor nesciunt eveniet consectetur doloremque vel fugiat.</p>
</div>
<h2 class="accordion__question" data-id="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<div class="accordion__answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ipsa, sunt, dignissimos quisquam cum, repudiandae ratione distinctio odio, suscipit voluptatem est deleniti maxime dolor nesciunt eveniet consectetur doloremque vel fugiat.</p>
</div>
<h2 class="accordion__question" data-id="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<div class="accordion__answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ipsa, sunt, dignissimos quisquam cum, repudiandae ratione distinctio odio, suscipit voluptatem est deleniti maxime dolor nesciunt eveniet consectetur doloremque vel fugiat.</p>
</div>
</div>
<script src="js/jquery-1.12.0.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/main.js"></script>
</body>
</html>
$(function() {
$(".accordion__answer").css("display", "none");
if ($.cookie("openItem")) {
var openItem = parseInt($.cookie("openItem"));
// alert(typeof(openItem) + ' - ' + openItem); // должно быть числовое значение
}
$(".accordion__question").on("click", function() {
$(".accordion__question").not($(this)).removeClass("faq__question_open");
$(".accordion__answer").not($(this).next(".faq__answer")).slideUp(500);
$(this).next(".accordion__answer").slideToggle(500);
$(this).toggleClass("accordion__question_open");
$(this).addClass("active").siblings().removeClass('active');
// уставнавливаем cookie
// первый параметр - имя, создаваемой cookie
// второй параметр - значение данной cookie
$.cookie("openItem", $(this).data('id'));
console.log($(this).data('id'));
});
});