Collapsible example with nested elements

[Alex Egorov]

Hello,

After reading the Collapsible example I have quesiton

https://www.w3schools.com/howto/howto_js_collapsible.asp
How to change parent element height when we have nested collapsible elements
and expanded the child element?

<button class="collapsible">Open Section 1</button>
<div class="content">
    <button class="collapsible">Open SubSection 1</button>
    <div class="content">
        <p>Some SubText.</p>
    </div>
    <p>Some SubText.</p>
</div>
 

<script>
var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

Edited March 1 by Alex Egorov