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!