<html>
<head>
<style>
.head {
border: 1px solid #C4E2F1;
padding: 10px;
margin: 0 0 2px 0;
cursor: pointer;
color:#E0DFDF;
background-color: #000000;
}
.spoiler {
display: none;
border: 1px solid #C4E2F1;
border-top: 0;
margin-bottom: 30px;
padding: 15px;
}
.head:after{
display: inline-block;
margin-left: 40px;
transform: rotate(360deg);
content: "^";
transition: .4s transform ;
}
.head.active:after{
transform: rotate(180deg);
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function() {
$(".head").click(function() {
var o = $(this).toggleClass('active'), s = o.next('.spoiler').stop(true,true).slideToggle(400);
$('.spoiler').not(s).slideUp(400).prev().removeClass('active');
});
});
</script>
</head>
<body>
<div class="head">Head</div>
<div class="spoiler"><img src="http://bolen-kot.net/wp-content/uploads/2016/09/htvXIzULTkU-300x140.jpg" /></div>
<div class="head">Head</div>
<div class="spoiler"><img src="http://bolen-kot.net/wp-content/uploads/2016/12/WXfkoTrLJ8-300x140.jpg" /></div>
<div class="head">Head</div>
<div class="spoiler"><img src="http://bolen-kot.net/wp-content/uploads/2016/07/cat-plants-300x140.jpg" /></div>
</body>
</html>
