Accordion block dynamic sizing

[Ron Brinkman]

I think there may be no automatic solution to this issue, but I will ask anyhow just in case...

I have implemented accordions in accordance with https://www.w3schools.com/howto/howto_js_accordion.asp.  Inside one of the accordion elements I have implemented a multi-level treeview in accordance with https://www.w3schools.com/howto/howto_js_treeview.asp.  The problem is that as the elements of the tree are opened they exceed the height of the accordion block and the bottom of the tree falls out of sight under the succeeding accordion block.

The primitive solution I am using is to put a bunch of extra whitespace below the tree, giving enough room for a generous amount of growth of the expanded tree...but of course, you will never know how much is enough extra whitespace in a dynamic tree.

So, the question is, is it feasible to have the accordion block size expand/contract dynamically as the size of the contents change?

Best Regards,

Ron Brinkman

[Ingolme]

You can have a script which runs periodically to update the height of open panels to fit their content. Something like this might work.

setInterval(updatePanels, 1000);
function updatePanels() {
  let activePanels = document.querySelectorAll(".accordion.active + .panel");
  activePanels.forEach(panel => {
    let maxHeight = parseInt(panel.style.maxHeight);
    if(maxHeight != panel.scrollHeight) {
    	panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}