JSFiddle - React, Tailwind, and code Playground
HTML
<a id="div0link" href="#" onclick="slideIn('d1'); slideOut();">Home</a>
<a id="div1link" href="#" onclick="slideIn('d2'); slideOut();">page1</a>
<a id="div2link" href="#" onclick="slideIn('d3'); slideOut();">page2</a>
<a id="div3link" href="#" onclick="slideIn('d4'); slideOut();">page3</a>
<div id="d1" style="position:absolute; left:200px; top:50px; background:black; color:white; width:100px">sliding div</div>
<div id="d2" style="position:absolute; left:300px; top:70px; background:blue; color:white; width:100px">sliding div</div>
<div id="d3" style="position:absolute; left:300px; top:90px; background:red; color:white; width:100px">sliding div</div>
<div id="d4" style="position:absolute; left:300px; top:110px; background:green; color:white; width:100px">sliding div</div>
JavaScript
var stopPositionVisible = 200;
var stopPositionHiding = 300;
var stopPositionOut = 100;
var allDivs = new Array();
allDivs[0] = "d1";
allDivs[1] = "d2";
allDivs[2] = "d3";
allDivs[3] = "d4";
function slideIn(xslide) {
var slidingDivInNow = document.getElementById(xslide);
if (parseInt(slidingDivInNow.style.left) > stopPositionVisible) {
slidingDivInNow.style.left = parseInt(slidingDivInNow.style.left) - 2 + "px";
console.log(slidingDivInNow.style.left);
setTimeout(function() {slideIn(xslide);}, 2);
}
}
function slideOut() {
for (var i = 0; i < allDivs.length; i++) {
var checkPosition = allDivs[i];
var slidingDivOutNow = document.getElementById(checkPosition);
if (slidingDivOutNow.style.left <= "200px") {
if (parseInt(slidingDivOutNow.style.left) > stopPositionOut) {
slidingDivOutNow.style.left = parseInt(slidingDivOutNow.style.left) - 2 + "px";
console.log(slidingDivOutNow.style.left);
setTimeout(function() { slideOut(asdf); }, 2);
if (slidingDivOutNow.style.left <= "104px") {
slidingDivOutNow.style.left = "300px";
}
}
}
}
}