function voorAccordion1() { if (document.getElementById("nodeLong1")) { // if this ID is there the Node boxes become small document.getElementById("nodeLong1").style.animation = "LangNaarKort 0.5s linear 1 normal forwards"; // Animation for Node button to become smaller document.getElementById("close-button").style.animation = "closeButton 0.5s linear 1 normal forwards"; // Close button becomes visible, to close all nodes agian to use the menu again. document.getElementById("menu1").style.animation = "buttonsUp1 0.5s linear 1 normal forwards"; // Menu buttons go up out of the screen to make place for information inside node document.getElementById("menu2").style.animation = "buttonsUp1 0.5s linear 1 normal forwards"; document.getElementById("menu3").style.animation = "buttonsUp2 0.5s linear 1 normal forwards"; document.getElementById("menu4").style.animation = "buttonsUp3 0.5s linear 1 normal forwards"; setTimeout(hiddencheck1, 500); function hiddencheck1() { document.getElementById("menu1").style.visibility = "hidden"; // Making menu buttons invisible when thir out of the screen so they don't reapear after clicking on acordions again because the animation goes off again after pressing a node again document.getElementById("menu2").style.visibility = "hidden"; document.getElementById("menu3").style.visibility = "hidden"; document.getElementById("menu4").style.visibility = "hidden"; } } if (document.getElementById("nodeLong1")) { document.getElementById("accordion1").style.visibility = "visible"; //Tab becomes visible again if they were invisible and make other tabs invisible so it doesn't overlap the current Tab document.getElementById("accordion1").style.animation = "accordions 0.5s linear 1 normal forwards"; // Animation for information that has to come in the screen document.getElementById("accordion2").style.animation = "accordions 0.5s linear 1 normal forwards"; // these also already get in the screen with an animation but their hidden, but that makes it faster to switch to these items document.getElementById("accordion3").style.animation = "accordions 0.5s linear 1 normal forwards"; document.getElementById("accordion2").style.visibility = "hidden"; // making sure the other information items stay hidden because else you can't see accordion1 since they overlap document.getElementById("accordion3").style.visibility = "hidden"; } }