tutzya,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type='text/css'>
.block1, .block3 {
position: relative;
width: 500px;
height: 50px;
background: blue;
}
.block2 {
position: relative;
width: 500px;
height: 125px;
background: #fff;
padding: 25px;
transition: all 0.5s ease;
}
.block2 > div {
float: left;
width: 250px;
}
.elem {
position: relative;
margin-bottom: 20px;
width: 200px;
}
.head {
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
background: green;
color: #fff;
font-weight: 700;
cursor: pointer;
}
.hide {
border-top: none!important;
border: 1px solid #bbb;
padding: 10px;
}
</style>
<script>
$(function() {
var $h = $(".hide"),
$a = $(".head"),
$b = $(".block2");
$h.each(function(indx, el) {
el = $(el);
var contHeight = el.height(),
head = $a.eq(indx);
el.hide();
head.on("click", function(event) {
event.preventDefault();
$h.stop(true,true).not(el.slideToggle(800)).slideUp(800);
$a.not(head.toggleClass("open")).removeClass("open");
$b.height(125 + head.is(".open") * contHeight)
})
})
});
</script>
</head>
<body>
<div class="block1"></div>
<div class="block2">
<div class="left">
<div class="elem">
<div class="head">Клик</div>
<div class="hide">Длинный спрятанный контент</div>
</div>
<div class="elem">
<div class="head">Клик</div>
<div class="hide">Очень-очень длинный трудночитаемый спрятанный контент</div>
</div>
<div class="elem">
<div class="head">Клик</div>
<div class="hide">Спрятанный контент</div>
</div>
</div>
<div class="right">
<div class="elem">
<div class="head">Клик</div>
<div class="hide">Спрятанный контент</div>
</div>
<div class="elem">
<div class="head">Клик</div>
<div class="hide">Спрятанный контент</div>
</div>
<div class="elem">
<div class="head">Клик</div>
<div class="hide">Спрятанный контент</div>
</div>
</div>
</div>
<div class="block3"></div>
</body>
</html>