JSFiddle - React, Tailwind, and code Playground
HTML
<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>
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;
}
JavaScript
$('.hide').hide();
$a = $('.head');
$a.on('click', function(event) {
event.preventDefault();
$a.not(this).removeClass('open').next().slideUp(800);
$(this).toggleClass('open').next().slideToggle(800);
});
$a.on('click', function(event) {
event.preventDefault();
var openChecking = $('.head').hasClass('open');
if(openChecking) {
var contHeight = $('.hide').height();
var newContHeight = contHeight + 125;
$('.block2').height(newContHeight);
} else {
$('.block2').height(125);
};
});