Window/Screen Collapsible bottom follow

user_17871448 0
Viewed 51

I am trying to get my screen to follow my collapsible when opening it. My content is hidden under the collapsible and i tried it with window.scrollTo() already, but my script is only getting the current location of my bottom footer which it has when i am pressing the button.

enter image description here

Edit:
My Code Snippet: https://jsfiddle.net/jz961rL0/2/
css html javascript
1 Answers

I was able to make this work using an ResizeObserver. I've assigned an id to your collapible container for simplicities sake, so I can query it easier, then assigned an oberserver to it, and everytime the dimension changes, it will 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 is not supported by Internet Explorer, but fingers crossed, that you are not required to support that plattform

user_12496410
Related