How can I switch between 2 divs smoothly when clicking on a switch?

Question

I've this switch here on my page at the top of two "pages" (divs):

What I want to do now is when I press the switch, I need to show the first div when the switch is at the left and the right one when it's at the right.

It should not just be hidden and shown, I need to apply the same effect to the div like to the switch, so a smooth scroll to the specific side.

I've absolutely no idea how to do this.

 var toggle = document.getElementById('container'); var toggleContainer = document.getElementById('toggle-container'); var toggleNumber; toggle.addEventListener('click', function() { toggleNumber = !toggleNumber; if (toggleNumber) { toggleContainer.style.clipPath = 'inset(0 0 0 50%)'; toggleContainer.style.backgroundColor = '#D74046'; } else { toggleContainer.style.clipPath = 'inset(0 50% 0 0)'; toggleContainer.style.backgroundColor = 'dodgerblue'; } }); 

 @import url('https://fonts.googleapis.com/css?family=Asap:400,500,700'); body { margin: 0; width: 100%; height: 100%; display: flex; position: absolute; left: 0; top: 0; font-family: 'Asap', sans-serif; background: white; } a { text-decoration: none; opacity: .6; padding: 60px; font-weight: bolder; position: absolute; right: 0px; bottom: 0px; font-size: 1.4em; } a:hover { opacity: 1; } #container { width: 160px; height: 36px; margin: auto; position: relative; border-radius: 6px; overflow: hidden; user-select: none; cursor: pointer; } .inner-container { position: absolute; left: 0; top: 0; width: inherit; height: inherit; text-transform: uppercase; font-size: .6em; letter-spacing: .2em; } .inner-container:first-child { background: #e9e9e9; color: #a9a9a9; } .inner-container:nth-child(2) { background: dodgerblue; color: white; clip-path: inset(0 50% 0 0); transition: .3s cubic-bezier(0, 0, 0, 1); } .toggle { width: 50%; position: absolute; height: inherit; display: flex; box-sizing: border-box; } .toggle p { margin: auto; } .toggle:nth-child(1) { right: 0; } #page-one { background: dodgerblue; width: 100%; height: 200px; margin-top: 20px; } #page-two { background: rgb(215, 64, 70); width: 100%; height: 200px; } 

 <div class="wrapper"> <div id="container"> <div class="inner-container"> <div class="toggle"> <p>Private</p> </div> <div class="toggle"> <p>Public</p> </div> </div> <div class="inner-container" id='toggle-container'> <div class="toggle"> <p>Private</p> </div> <div class="toggle"> <p>Public</p> </div> </div> </div> <div id="page-one"></div> <div id="page-two"></div> </div> 

Answer 1

One way to do this would be to absolutely position the content divs on top of each other, and then move them to each side and hide the overflow. I'm sure that there are other ways of doing it and I'd love to see some.

Here's my solution to this:

 var toggle = document.getElementById("container"); var toggleContainer = document.getElementById("toggle-container"); const toggleContent1 = document.getElementById("page-one"); const toggleContent2 = document.getElementById("page-two"); var toggleNumber; toggle.addEventListener("click", function() { toggleNumber = !toggleNumber; if (toggleNumber) { toggleContainer.style.clipPath = "inset(0 0 0 50%)"; toggleContainer.style.backgroundColor = "#D74046"; toggleContent1.style.transform = "translateX(100%)"; toggleContent2.style.transform = "translateX(0%)"; } else { toggleContainer.style.clipPath = "inset(0 50% 0 0)"; toggleContainer.style.backgroundColor = "dodgerblue"; toggleContent2.style.transform = "translateX(-100%)"; toggleContent1.style.transform = "translateX(0%)"; } }); 

 @import url("https://fonts.googleapis.com/css?family=Asap:400,500,700"); body { margin: 0; width: 100%; height: 100%; display: flex; position: absolute; left: 0; top: 0; font-family: "Asap", sans-serif; background: white; } a { text-decoration: none; opacity: 0.6; padding: 60px; font-weight: bolder; position: absolute; right: 0px; bottom: 0px; font-size: 1.4em; } a:hover { opacity: 1; } .container { width: 160px; height: 36px; margin: auto; position: relative; border-radius: 6px; overflow: hidden; user-select: none; cursor: pointer; } .inner-container { position: absolute; left: 0; top: 0; width: inherit; height: inherit; text-transform: uppercase; font-size: 0.6em; letter-spacing: 0.2em; } .inner-container:first-child { background: #e9e9e9; color: #a9a9a9; } .inner-container:nth-child(2) { background: dodgerblue; color: white; clip-path: inset(0 50% 0 0); transition: 0.3s cubic-bezier(0, 0, 0, 1); } .toggle { width: 50%; position: absolute; height: inherit; display: flex; box-sizing: border-box; } .toggle p { margin: auto; } .toggle:nth-child(1) { right: 0; } .content_container { margin-top: 2rem; width: 100%; cursor: initial; } .content_inner_container { position: relative; overflow: hidden; width: 100%; height: 200px; } .content { display: inline; position: absolute; top: 0; left: 0; transition: all 0.3s cubic-bezier(0, 0, 0, 1); padding: 10px; color: white; } #page-one { background: dodgerblue; width: 100%; height: 200px; } #page-two { background: rgb(215, 64, 70); width: 100%; height: 200px; transform: translateX(-100%); } 

 <div class="wrapper"> <div id="container" class="container"> <div class="inner-container"> <div class="toggle"> <p>Private</p> </div> <div class="toggle"> <p>Public</p> </div> </div> <div class="inner-container" id='toggle-container'> <div class="toggle"> <p>Private</p> </div> <div class="toggle"> <p>Public</p> </div> </div> </div> <div class="content_container"> <div class="content_inner_container"> <div id="page-one" class="content">some content here</div> <div id="page-two" class="content">even more content </div> </div> </div> </div> 

Answer 2

You can try using JavaScript to set display to none and block whenever any of those buttons are clicked:

 function SwapDiv(div1,div2) { d1 = document.getElementById(div1); d2 = document.getElementById(div2); if( d2.style.display == "none" ) { d1.style.display = "none"; d2.style.display = "block"; } else { d1.style.display = "block"; d2.style.display = "none"; } } var toggle = document.getElementById('container'); var toggleContainer = document.getElementById('toggle-container'); var toggleNumber; toggle.addEventListener('click', function() { toggleNumber = !toggleNumber; if (toggleNumber) { toggleContainer.style.clipPath = 'inset(0 0 0 50%)'; toggleContainer.style.backgroundColor = '#D74046'; } else { toggleContainer.style.clipPath = 'inset(0 50% 0 0)'; toggleContainer.style.backgroundColor = 'dodgerblue'; } }); 

 @import url('https://fonts.googleapis.com/css?family=Asap:400,500,700'); body { margin: 0; width: 100%; height: 100%; display: flex; position: absolute; left: 0; top: 0; font-family: 'Asap', sans-serif; background: white; } a { text-decoration: none; opacity: .6; padding: 10px; font-weight: bolder; position: absolute; right: 0px; bottom: 0px; font-size: 1.4em; } a:hover { opacity: 1; } #container { width: 160px; height: 36px; margin: auto; position: relative; border-radius: 6px; overflow: hidden; user-select: none; cursor: pointer; } .inner-container { position: absolute; left: 0; top: 0; width: inherit; height: inherit; text-transform: uppercase; font-size: .6em; letter-spacing: .2em; } .inner-container:first-child { background: #e9e9e9; color: #a9a9a9; } .inner-container:nth-child(2) { background: dodgerblue; color: white; clip-path: inset(0 50% 0 0); transition: .3s cubic-bezier(0, 0, 0, 1); } .toggle { width: 50%; position: absolute; height: inherit; display: flex; box-sizing: border-box; } .toggle p { margin: auto; } .toggle:nth-child(1) { right: 0; } #page-one { background: dodgerblue; width: 100%; height: 200px; margin-top: 20px; } #page-two { background: rgb(215, 64, 70); width: 100%; height: 200px; } 

 <div class="wrapper"> <div id="container"> <div class="inner-container"> <div class="toggle"> <p style="text-align:center; font-weight:bold; font-style:italic;"> <a href="javascript:void(0);" onclick="SwapDiv('page-one','page-two')">Private</a> </p> </div> <div class="toggle"> <p style="text-align:center; font-weight:bold; font-style:italic; margin:0;"> <a href="javascript:void(0);" onclick="SwapDiv('page-one','page-two')">Public</a> </p> </div> </div> <div class="inner-container" id='toggle-container'> <div id="toggle1"> <p style="text-align:center; font-weight:bold; font-style:italic;"> <a href="javascript:void(0);" onclick="SwapDiv('page-one','page-two')">Private</a> </p> </div> <div id="toggle2"> <p style="text-align:center; font-weight:bold; font-style:italic;"> <a href="javascript:void(0);" onclick="SwapDiv('page-one','page-two')">Public</a> </p> </div> </div> </div> <div id="page-one" style="display:block; margin:0;";></div> <div id="page-two" style="display:none";></div> </div>