My objective is to create a functionality where flipping the switch button will cause it to slide automatically to the right, revealing a red background div. When switched off, it should return to its original position with a yellow background using Jquery. Please review my code snippets for a demonstration. Thank you!
.container {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* overflow: hidden;
overflow-y: auto; */
transition: .22s ease left;
background: #f3faff;
}
.wrapper {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: auto;
text-align: left;
display: flex;
align-items: stretch;
flex-direction: row;
flex-wrap: nowrap;
width: 200%;
}
.left-100 {
background: yellow;
width: 50%;
padding: 10px;
}
.right-100 {
background: red;
width: 50%;
padding: 10px;
}
.switch {
display: inline-block;
position: relative;
margin: 0 0 10px;
font-size: 16px;
line-height: 24px;
}
.switch__input {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 20px;
opacity: 0;
z-index: 0;
}
.switch__label {
display: block;
padding: 0 0 0 44px;
cursor: pointer;
}
.switch__label:before {
content: '';
position: absolute;
top: 5px;
left: 0;
width: 36px;
height: 14px;
background-color: rgba(0, 0, 0, .26);
border-radius: 14px;
z-index: 1;
transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch__label:after {
content: '';
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 14px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
z-index: 2;
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition-property: left, background-color;
}
.switch__input:checked + .switch__label:before {
background-color: rgba(63, 81, 181, .5);
}
.switch__input:checked + .switch__label:after {
left: 16px;
background-color: #3f51b5;
}
.switcher-c {
background: #ffffff;
width: 100%;
position: fixed;
z-index: 11;
left: 0;
}
.margin-top {
margin-top: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switcher-c">
<div class="switch">
<input type="checkbox" id="switch2" class="switch__input">
<label for="switch2" class="switch__label">Switch 2</label>
</div>
</div>
<div class="container">
<div class="wrapper">
<div class="left-100"><div class="margin-top">Left slide 100% Width</div></div>
<div class="right-100"><div class="margin-top">Right Slide 100% Width</div></div>
</div>
</div>