Pude hacer que esto funcionara usando un ResizeObserver . Le asigné una identificación a su contenedor plegable por razones de simplicidad, por lo que puedo consultarlo más fácilmente, luego le asigné un observador y cada vez que cambie la dimensión, se desplazará hacia la scrollIntoView() :

 // https://www.w3schools.com/howto/howto_js_collapsible.asp var coll = document.getElementsByClassName("collapsible"); var i; let collapsibleContainer = document.getElementById("container"); let resizeObserver = new ResizeObserver(entries => { // make sure entries only ever contains one element. // scrolling to multiple elements simultanously might yield // interesting results. for(let entry of entries) { collapsibleContainer.scrollIntoView() } }); resizeObserver.observe(collapsibleContainer); 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"; } }); }

HTML:

 <button class="collapsible"> <div class="wrapper"> <h1 class="headline">collapsible</h1> </div> </button> <div class="content-collapse" id="container"> <!-- Rest omitted --> </div>

ResizeObserver no es compatible con Internet Explorer, pero cruce los dedos para que no sea necesario que sea compatible con esa plataforma.