Collapsible example with nested elements in JavaScript Posted March 1 · Edited March 1 by 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>
Collapsible example with nested elements
in JavaScript
Posted · Edited by 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>