另一个可折叠部分中的可折叠部分不会充分展开

Question

In the following code, I have a collapsable section within another collapsible section. When I open the outermost collapsable section, it works fine and shows me the contents underneath it. But when I try to open inner collapsable sections, it won't expand enough for me to see all the content. Please run the following program to see the issue.

 var coll = document.getElementsByClassName("collapsible"); var i; for (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"; } }); }

 .collapsible { background-color: #2d2e2e; color: white; cursor: pointer; padding: 10px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: black; } .collapsible:after { content: '\\002B'; color: white; font-weight: bold; float: left; margin-right: 5px; } .active:after { content: "\\2212"; } .collapse_content { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.1s ease-out; }

 <button class="collapsible">Full Collapsible Set:</button> <div class="collapse_content"> <button class="collapsible">Open Section 1</button> <div class="collapse_content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="collapsible">Open Section 2</button> <div class="collapse_content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <button class="collapsible">Open Section 3</button> <div class="collapse_content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div>

Answer 1

If animation is not needed you can set max-height to fit-content

Otherwise you can add element's scrollHeight into it's parent's height. And to avoid setting too large number (if same child item was opened/closed several times) you can add transitionend even listener to set proper max-height of the parent there:

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

 .collapsible { background-color: #2d2e2e; color: white; cursor: pointer; padding: 10px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: black; } .collapsible:after { content: '\\002B'; color: white; font-weight: bold; float: left; margin-right: 5px; } .active:after { content: "\\2212"; } .collapse_content { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.1s ease-out; }

 <button class="collapsible">Full Collapsible Set:</button> <div class="collapse_content"> <button class="collapsible">Open Section 1</button> <div class="collapse_content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="collapsible">Open Section 2</button> <div class="collapse_content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <button class="collapsible">Open Section 3</button> <div class="collapse_content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div>