Preview:
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";
}
}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter