<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);
  }

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js