JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="inner">
<div id="home">
<button>Click</button>
</div>
<div id="member-home">
<button>Click</button>
</div>
</div>
</div>
CSS
#container {
position:relative;
border: 1px solid black;
width:400px;
height:600px;
overflow:hidden
}
#inner {
position: relative;
width: 800px;
}
#home {
position:absolute;
width: 400px;
height: 600px;
background-color: red;
}
#member-home {
position:absolute;
left:400px;
width: 400px;
height: 600px;
background-color: green;
}
JavaScript
function toggleDivs() {
var $inner = $("#inner");
// See which <divs> should be animated in/out.
if ($inner.position().left == 0) {
$inner.animate({
left: "-400px"
});
}
else {
$inner.animate({
left: "0px"
});
}
}
$("button").bind("click", function() {
toggleDivs();
});