<div class="parent targetClick" show="0" onclick="showHidden(this);">Кликабельный родитель</div>
<div class="contentWrapper" >
<div class="contentInnerWrapper">
<div>контент</div>
<div>контент</div>
<div>контент</div>
<div>контент</div>
<div>контент</div>
<div>контент</div>
<div>контент</div>
<div>контент</div>
<div>контент</div>
<div>контент</div>
<div class="click targetClick" show="0" onclick="showHidden(this);">Нажать</div>
<div class="clickContentWrapper">
<div class="clickInnerWrapper">
<div>контент по клику</div>
<div>контент по клику</div>
<div>контент по клику</div>
<div>контент по клику</div>
<div>контент по клику</div>
</div>
</div>
</div>
</div>
.parent {
background-color: lightgreen;
padding: 20px;
width: max-content;
cursor: pointer;
}
.contentWrapper {
transition: 0.6s;
overflow: hidden;
height: 0;
}
.contentInnerWrapper {
border: 1px solid black;
padding: 10px;
}
.click {
background-color: blue;
padding: 5px;
width: max-content;
color: white;
margin: 10px 10px 10px 0;
cursor: pointer;
}
.clickContentWrapper {
transition: 0.6s;
overflow: hidden;
height: 0;
}
.clickContentWrapper.show {
height: max-content;
}
.clickInnerWrapper {
border: 1px solid black;
padding: 10px;
}
function showHidden(elem) {
let show = $(elem).attr("show");
if (show == 0 ) {
$(elem).attr("show", 1);
let contentInnerWrapperHeight = $(elem).next().children().outerHeight();
$(elem).next().height(contentInnerWrapperHeight);
setTimeout(function() {
let contentInnerWrapperHeightParent = $('.targetClick:first-child').next().children().outerHeight()
$('.targetClick:first-child').next().outerHeight(contentInnerWrapperHeightParent)
}, 600);
} else {
$(elem).attr("show", 0);
$(elem).next().height(0);
}
}
This Pen doesn't use any external CSS resources.