Question posted in 
I’m trying to build a nested accordion structure where each accordion, when clicked, updates both its own and its parent’s maxHeight dynamically. However, whenever I open a child accordion, the parent’s height is sometimes computed incorrectly. I expect it to be around 288px, for example, but it ends up at 160px, or part of the content is cut off.
Below is a simplified version of my click handler. When a .aside-accordion button is clicked, I set the child accordion’s maxHeight, then use a while loop to update any parent .accordion-content elements:
document.addEventListener('click', function(event) {
if (event.target.matches('.aside-accordion')) {
const button = event.target;
const accordionMenu = button.nextElementSibling;
const buttonArrow = button.querySelector('.arrow');
button.classList.toggle('active');
if (button.classList.contains('active')) {
buttonArrow.classList.add('rotate-180');
accordionMenu.style.maxHeight = accordionMenu.scrollHeight + 'px';
} else {
buttonArrow.classList.remove('rotate-180');
accordionMenu.style.maxHeight = 0;
}
let parentContent = accordionMenu.parentElement.closest('.accordion-content');
while (parentContent) {
const parentButton = parentContent.previousElementSibling;
if (parentButton && parentButton.classList.contains('active')) {
// Here I'm assigning the parent's actual height
parentContent.style.maxHeight = parentContent.scrollHeight + 'px';
}
parentContent = parentContent.parentElement.closest('.accordion-content');
}
}
});
Expectation: When the child accordion opens, all parent accordions should automatically expand to accommodate the child’s height, so the content is fully visible.
Issue: Sometimes the parent’s maxHeight ends up smaller than expected or partially hides the content, requiring a second click to fix it. I’m using transition: max-height 0.3s ease; overflow: hidden; on all accordions.
I’ve tried using a large hard-coded value (e.g., 999999px) instead of scrollHeight and it “fixes” the issue, but that’s obviously not a clean solution. requestAnimationFrame or small setTimeout calls sometimes help, but still produce inconsistent results. I also tested transitionend, but sometimes the content “jumps” on the initial open.
Question: How can I reliably update the parent maxHeight in a nested accordion so that the first click always shows the correct expanded height (without glitches or having to click again)?
2
Answers
You don’t need to manualy change the height every time.
Just set
height: auto;for theactiveclass in your CSS.The issue with your implementation likely stems from the fact that setting maxHeight based on scrollHeight can be tricky in nested accordion structures, as the browser may not have fully recalculated the layout before updating the parent elements. Here’s a reliable approach to fix the problem:
Key Considerations:
Recalculate Heights After DOM Updates
When opening a child accordion, the parent’s scrollHeight may not yet include the child’s new height. You need to wait for the browser to finish recalculating the layout before updating the parent’s maxHeight.
Avoid Conflicts With Transitions
If transition: max-height is applied while dynamically updating maxHeight, it can cause glitches or jumps. To prevent this, disable the transition temporarily during height recalculations.
The issue with your implementation likely stems from the fact that setting maxHeight based on scrollHeight can be tricky in nested accordion structures, as the browser may not have fully recalculated the layout before updating the parent elements. Here’s a reliable approach to fix the problem:
Key Considerations:
Recalculate Heights After DOM Updates
When opening a child accordion, the parent’s scrollHeight may not yet include the child’s new height. You need to wait for the browser to finish recalculating the layout before updating the parent’s maxHeight.
Avoid Conflicts With Transitions
If transition: max-height is applied while dynamically updating maxHeight, it can cause glitches or jumps. To prevent this, disable the transition temporarily during height recalculations.
Solution:
Below is the updated implementation, addressing the issues: