s24344,
<!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;
display: none;
}
.active{
border: 2px solid #000000
}
</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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(function() {
var $answer = $(".accordion__answer"), $question = $(".accordion__question");
$question.on("click", function(event, spide) {
spide = spide || 500;
$question.not($(this).toggleClass("faq__question_open active")).removeClass("faq__question_open active");
$answer.not($(this).next().slideToggle(spide)).slideUp(spide);
$.cookie("openItem", $(this).data('id'));
});
if ($.cookie("openItem")) {
var openItem = parseInt($.cookie("openItem"));
$question.eq(--openItem).trigger("click",["fast"])
}
});
</script>
</body>
</html>