0

I am using accordions, and after I open an accordion, I use scrollIntoView to bring the window to the center of the accordion. When I close the accordion, I want to use scrollIntoView to bring the top of the windows screen to the top of the accordion elements parent element. I can identify the parent element fine, but for some reason scrollIntoView is not working. Here is the JavaScript I am using:

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  var reply_click = function() {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      var relevant = document.getElementById(this.id);
      var scrBack = relevant.parentElement.parentElement.id;
      console.log(scrBack);

      if (content.style.display === "block") {
        content.style.display = "none";
        scrBack.scrollIntoView({
          behavior: "smooth",
          block: "end",
          inline: "nearest"
        });
      } else {
        content.style.display = "block";
        relevant.scrollIntoView({
          block: 'start',
          behavior: 'smooth'
        });
      }
    });

    reply_click();
  }
}

I would like to do this without the use of jQuery.

Thank you!

Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132

0 Answers0