I am currently in the process of setting up button elements. I have two scripts that correspond to different types of buttons - one script runs a simple collapse menu, while the other executes a more complex collapse by shifting depths and sliding one div over another. Everything seems to be functioning correctly except for the depth (zindex) switch. Whenever I implement the depth switch, it stops running anything beyond that point. Below is the specific script causing issues.
/* fetching all menu and page buttons */
var menuButtons = document.getElementsByClassName("menuButton");
var pageButtons = document.getElementsByClassName("pageButton");
/* initializing working array index */
var i;
/* IDs of previous and current content pages */
var prevPage;
var currentPage;
/* when a page button is clicked, set the prevPage to the lowest depth and slide the new page overtop */
for (i = 0; i < pageButtons.length; i++) {
pageButtons[i].addEventListener("click", function() {
this.classList.toggle("active");
/* fetching reference to target page from the button */
var pageId = this.getAttribute("pageTarget");
currentPage = document.getElementById(pageId);
/* setting content page depths */
prevPage.style.zIndex = "0";
currentPage.style.zIndex = "1";
/* setting the left position to start the page transition */
currentPage.style.left = "100vw";
alert("button clicked");
/* triggering a delayed function to clear the previous page */
clearPrevPage();
});
};
/* delayed function that transitions prevPage to its starting position */
function clearPrevPage() {
setTimeout(function() {
prevPage.style.left = "100vw";
/* setting the variable for the next run */
prevPage = currentPage;
alert("delayed");
}, 400);
};