Develop Reference

carousel with popup when clicking on the image error

I am trying to create a image carousel and when clicking on one of the images, the exact image enlarges in a popup with a close button. Right now, i'm having this issue where when i click on the second image on the carousel, the popup comes up with the first picture on the carousel.
Here is my HTML Code
<div class="carousel">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item">
<img src="C:\Users\uppil\OneDrive\Desktop\WD\SS project\Used Resources\Wildlife 1.jpg" onclick="openModal();currentSlide(1)" width="351" height="256" class="hover-shadow cursor">
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="C:\Users\uppil\OneDrive\Desktop\WD\SS project\Used Resources\Wildlife 2.jpg" onclick="openModal();currentSlide(2)" width="351" height="256" class="hover-shadow cursor">
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="C:\Users\uppil\OneDrive\Desktop\WD\SS project\Used Resources\Wildlife 3.jpg" onclick="openModal();currentSlide(3)" width="351" height="256" class="hover-shadow cursor">
</div>
<div class="carousel-item">
<img src="C:\Users\uppil\OneDrive\Desktop\WD\SS project\Used Resources\Wildlife 4.jpg" onclick="openModal();currentSlide(4)" width="351" height="256" class="hover-shadow cursor">
</div>
<label for="carousel-3" class="carousel-control prev control-1">‹</label>
<label for="carousel-2" class="carousel-control next control-1">›</label>
<label for="carousel-1" class="carousel-control prev control-2">‹</label>
<label for="carousel-3" class="carousel-control next control-2">›</label>
<label for="carousel-2" class="carousel-control prev control-3">‹</label>
<label for="carousel-1" class="carousel-control next control-3">›</label>
<ol class="carousel-indicators">
<li>
<label for="carousel-1" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-2" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-3" class="carousel-bullet">•</label>
</li>
</ol>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="C:\Users\uppil\OneDrive\Desktop\WD\SS project\Used Resources\Wildlife 1.jpg" style="width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="C:\Users\uppil\OneDrive\Desktop\WD\SS project\Used Resources\Wildlife 2.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="C:\Users\uppil\OneDrive\Desktop\WD\SS project\Used Resources\Wildlife 3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="C:\Users\uppil\OneDrive\Desktop\WD\SS project\Used Resources\Wildlife 3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="C:\Users\uppil\OneDrive\Desktop\WD\SS project\Used Resources\Wildlife 4.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
Here is my JavaScript Code
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
var slidesPerPage = 4; //globaly define number of elements per page
var syncedSecondary = true;
sync1.owlCarousel({
items : 1,
slideSpeed : 2000,
nav: true,
//autoplay: true,
dots: true,
loop: true,
responsiveRefreshRate : 200,
navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #FFF;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>','<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #FFF;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
}).on('changed.owl.carousel', syncPosition);
sync2
.on('initialized.owl.carousel', function () {
sync2.find(".owl-item").eq(0).addClass("current");
})
.owlCarousel({
items : slidesPerPage,
dots: true,
nav: true,
smartSpeed: 200,
slideSpeed : 500,
slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
responsiveRefreshRate : 100
}).on('changed.owl.carousel', syncPosition2);
function syncPosition(el) {
//if you set loop to false, you have to restore this next line
//var current = el.item.index;
//if you disable loop you have to comment this block
var count = el.item.count-1;
var current = Math.round(el.item.index - (el.item.count/2) - .5);
if(current < 0) {
current = count;
}
if(current > count) {
current = 0;
}
//end block
sync2
.find(".owl-item")
.removeClass("current")
.eq(current)
.addClass("current");
var onscreen = sync2.find('.owl-item.active').length - 1;
var start = sync2.find('.owl-item.active').first().index();
var end = sync2.find('.owl-item.active').last().index();
if (current > end) {
sync2.data('owl.carousel').to(current, 100, true);
}
if (current < start) {
sync2.data('owl.carousel').to(current - onscreen, 100, true);
}
}
function syncPosition2(el) {
if(syncedSecondary) {
var number = el.item.index;
sync1.data('owl.carousel').to(number, 100, true);
}
}
sync2.on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).index();
sync1.data('owl.carousel').to(number, 300, true);
});
});
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
$('.image-popup-fit-width').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
});
Here is my CSS
html, body {
margin: 0px;
padding: 0px;
background-color: black;
}
.carousel {
position: relative;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
margin-top: 26px;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
margin-left: 800px;
}
.carousel-item img {
display: block;
height: auto;
max-width: 100%;
}
.carousel-control {
background: rgba(0, 0, 0, 0.28);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: none;
font-size: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.8);
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
background-color: transparent;
}
.carousel-indicators li {
display: inline-block;
margin: 0 5px;
background-color: transparent;
}
.carousel-bullet {
color: #fff;
cursor: pointer;
display: block;
font-size: 35px;
background-color: transparent;
}
.carousel-bullet:hover {
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
color: #428bca;
}
#title {
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
html, body {
margin: 0px;
padding: 0px;
background: url("http://digital.bnint.com/filelib/s9/photos/white_wood_4500x3000_lo_res.jpg");
background-color: black;
}
.carousel1 {
position: relative;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
margin-top: 26px;
}
.carousel1-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel1-open:checked + .carousel1-item {
position: static;
opacity: 100;
}
.carousel1-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
margin-left: 800px;
}
.carousel1-item img {
display: block;
height: auto;
max-width: 100%;
}
.carousel1-control {
background: rgba(0, 0, 0, 0.28);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: none;
font-size: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel1-control.prev {
left: 2%;
}
.carousel1-control.next {
right: 2%;
}
.carousel1-control:hover {
background: rgba(0, 0, 0, 0.8);
color: #aaaaaa;
}
#carousel1-1:checked ~ .control-1,
#carousel1-2:checked ~ .control-2,
#carousel1-3:checked ~ .control-3 {
display: block;
}
.carousel1-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
background-color: transparent;
}
.carousel1-indicators li {
display: inline-block;
margin: 0 5px;
background-color: transparent;
}
.carousel1-bullet {
color: #fff;
cursor: pointer;
display: block;
font-size: 35px;
background-color: transparent;
}
.carousel1-bullet:hover {
color: #aaaaaa;
}
#carousel1-1:checked ~ .control-1 ~ .carousel1-indicators li:nth-child(1) .carousel1-bullet,
#carousel1-2:checked ~ .control-2 ~ .carousel1-indicators li:nth-child(2) .carousel1-bullet,
#carousel1-3:checked ~ .control-3 ~ .carousel1-indicators li:nth-child(3) .carousel1-bullet {
color: #428bca;
}
#title {
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
}
i have tried the code a few times and i see that at first when i click the arrow button to move to the next image, for a few millisecond the popup redirects me correctly, after that, the correct popup does not work and when i click on the image it comes up with the wrong popup.

Javascript refactoring help needed

I have an image toggle triggered by button clicks and checkboxes. My code is currently working how I need it to, but I'm very new to JavaScript so I'm sure there is a cleaner way to do this.
A few notes:
This is for a client, so for confidentiality reasons, I cannot share the actual images, but the alt tags should tell the story.
I'm not allowed to use anything other than vanilla JS on the platform this will live, and all variables and functions have to have custom names, hence the funky naming.
var csDMU_checkbox = document.getElementById("csDMU_checkbox");
var csDMU_imageBefore = document.getElementById("before-image");
var csDMU_imageAfter = document.getElementById("after-image");
var csDMU_imageCombo = document.getElementById("combo-image");
var csDMU_switch = document.getElementById("switch");
var csDMU_toggle = document.getElementById("toggle");
function csDMU_toggleImage() {
if (csDMU_checkbox.checked == true) {
csDMU_imageBefore.style.display = "none";
csDMU_imageAfter.style.display = "block";
csDMU_imageCombo.style.display = "none";
} else {
csDMU_imageBefore.style.display = "block";
csDMU_imageAfter.style.display = "none";
csDMU_imageCombo.style.display = "none";
}
}
function csDMU_comboView() {
csDMU_imageCombo.style.display = "block";
csDMU_imageBefore.style.display = "none";
csDMU_imageAfter.style.display = "none";
csDMU_switch.style.display = "none";
csDMU_toggle.style.display = "block";
}
function csDMU_toggleView() {
csDMU_switch.style.display = "block";
csDMU_toggle.style.display = "none";
csDMU_imageBefore.style.display = "block";
csDMU_imageCombo.style.display = "none";
}
#import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght#0,400;0,700;1,400;1,700&display=swap');
body {
font-family: 'Libre Franklin', sans-serif;
}
.flexRow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 119px;
height: 40px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #243b43;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 32px;
width: 33px;
right: 4px;
bottom: 3px;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(47%, #EDEDED), color-stop(73%, #D0D0D0), to(#E5E5E5)) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #FFFFFF 0%, #EDEDED 47%, #D0D0D0 73%, #E5E5E5 100%) 0% 0% no-repeat padding-box;
-webkit-box-shadow: 0px 3px 6px #00000029;
box-shadow: 0px 3px 6px #00000029;
border: 1px solid #FFFFFF;
-webkit-transition: .4s;
transition: .4s;
}
.slider:after {
content: "BEFORE";
display: block;
font-size: 14px;
line-height: 14px;
letter-spacing: 0.16px;
font-weight: bold;
color: #FFF;
position: relative;
top: 13px;
left: 10px;
}
input:checked + .slider {
background-color: #F26322;
}
input:focus + .slider {
-webkit-box-shadow: 0 0 1px #2196F3;
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(-75px);
transform: translateX(-75px);
}
input:checked + .slider:after {
content:'AFTER';
left: 50px;
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.combo-button,
.toggle-button{
width: 172px;
height: 40px;
margin-left: 20px;
border-radius: 100px;
border: 1px solid #C4C4C4;
color: #4a4b4d;
letter-spacing: 0.16px;
}
.combo-button:hover,
.combo-button:focus {
background-color: #002D5E;
color: #FFF;
}
.combo-button:focus {
outline: 0;
}
.toggle-button {
display: none;
width: 119px;
margin: 0;
}
.hand-img {
max-width: 700px;
margin-right: -20px;
display: block;
}
#after-image,
#combo-image {
display: none;
}
<html>
<body>
<div id="image-change">
<img src="" alt="before image" class="hand-img" id="before-image" />
<img src="" alt="after image" class="hand-img" id="after-image" />
<img src="" alt="combo image" class="hand-img" id="combo-image" />
</div>
<div class="flexRow">
<label class="switch" id="switch">
<input type="checkbox" id="csDMU_checkbox" onclick="csDMU_toggleImage()">
<span class="slider round"></span>
</label>
<button class="toggle-button" id="toggle" onclick="csDMU_toggleView()">TOGGLE VIEW</button>
<button class="combo-button" onclick="csDMU_comboView()">COMPARISON</button>
</div>
</body>
</html>

Well you could minimize your JS code by first selecting all the elements using one line selector, note that you need to write the selected elements in their order in HTML to get them right because we're destructuring the returned node list into variables so the order matters because it's an array and not an object, then you are writing repeatedly element.style.display = "some value" so you can write a function to do that using an array of elements as input and their display value to set as two arrays and just loop over the first array of the elements and assign the correct CSS display value according to the index, and use a ternary expression instead of If-Else statement too write less code, here is the full JS code
let [csDMU_imageBefore, csDMU_imageAfter, csDMU_imageCombo, csDMU_switch, csDMU_checkbox, csDMU_toggle] = document.querySelectorAll("#before-image, #after-image, #combo-image, #switch, #csDMU_checkbox, #toggle");
const setCssDisplay = (elements, values) => elements.forEach((element, index) => element.style.display = values[index]);
function csDMU_toggleImage() {
setCssDisplay([csDMU_imageBefore, csDMU_imageAfter, csDMU_imageCombo], csDMU_checkbox.checked ? ["none", "block", "none"] : ["block", "none", "none"]);
}
function csDMU_comboView() {
setCssDisplay([csDMU_imageCombo, csDMU_imageBefore, csDMU_imageAfter, csDMU_switch, csDMU_toggle], ["block", "none", "none", "none", "block"]);
}
function csDMU_toggleView() {
setCssDisplay([csDMU_switch, csDMU_toggle, csDMU_imageBefore, csDMU_imageCombo], ["block", "none", "block", "none"]);
}

Pure CSS Checkbox with JS toggle not working

Searched all over the internet, and I can't beat this issue.
I have a pricing section with a pricing plan switch. The logic itself is working fine, however, the CSS checkbox toggle itself isn't switching from left to right.
I assume it has to do with the CSS itself or the way I select the elements with JS. I've also read some topics on SO where they say that it's a checkbox issue with WordPress, didn't find my answer there, unfortunately.
The issue
On Chrome desktop, the CSS checkbox toggle isn't working.
On Safari, iPhone X the CSS checkbox switch checkbox does work but only if you click the label elements with text
Here's a link to the page
Link to Dropbox of me demonstrating the issue on iPhone
window.onload = function() {
var e = document.getElementById("firstPlan"),
d = document.getElementById("secondPlan"),
t = document.getElementById("switcher_iOS"),
m = document.getElementById("firstPlan_box"),
y = document.getElementById("secondPlan_box");
if (document.getElementById("switcher_iOS") == null) {
var node = document.createElement("input");
node.id = "switcher_iOS";
node.type = "checkbox";
node.className = "toggle_iOS--check";
var elm = document.getElementsByClassName('toggle_iOS')[0];
elm.insertBefore(node, elm.firstChild)
t = document.getElementById("switcher_iOS");
}
e.addEventListener("click", function() {
t.checked = false;
e.classList.add("togglePricing--is-active");
d.classList.remove("togglePricing--is-active");
m.classList.remove("hide");
y.classList.add("hide");
});
d.addEventListener("click", function() {
t.checked = true;
d.classList.add("togglePricing--is-active");
e.classList.remove("togglePricing--is-active");
m.classList.add("hide");
y.classList.remove("hide");
});
t.addEventListener("click", function() {
d.classList.toggle("togglePricing--is-active");
e.classList.toggle("togglePricing--is-active");
m.classList.toggle("hide");
y.classList.toggle("hide");
t.checked = !t.checked;
})
}
/* Toggle */
#switcher_iOS {
width: 100%;
}
.toggle_iOS,
.togglePricing {
display: inline-block;
vertical-align: middle;
margin: 10px;
}
.togglePricing {
color: #ccc9c9;
cursor: pointer;
transition: .1s;
font-weight: bold;
font-size: 17px;
}
.togglePricing--is-active {
color: #181818;
}
.toggle_iOS {
position: relative;
width: 58px;
height: 28px;
border-radius: 100px;
background-color: #1D8BF1;
overflow: hidden;
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
}
.toggle_iOS--check {
position: absolute;
display: block;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 6;
}
.toggle_iOS--check:checked~.toggle_iOS--switch {
right: 2px;
left: 57.5%;
transition: 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-property: left, right;
transition-delay: .01s, 0s;
}
.toggle_iOS--switch {
position: absolute;
left: 2px;
top: 2px;
cursor: pointer;
bottom: 2px;
right: 57.5%;
background-color: #fff;
border-radius: 36px;
z-index: 1;
transition: 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-property: left, right;
transition-delay: 0s, .01s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
<label class="togglePricing togglePricing--is-active" id="firstPlan">Payment Plan</label>
<div class="toggle_iOS">
<label for="switcher_iOS"><input type="checkbox" onclick="void(0);" id="switcher_iOS" class="toggle_iOS--check" checked></label><b onclick="void(0);" class="toggle_iOS--switch"></b>
</div>
<label class="togglePricing" id="secondPlan">One Payment</label>

I have simplified your css, and in order for this to work, you have to remove your JS that reset the state of the checkbox from the checkbox on click event such as
t.checked = !t.checked;
var t = document.getElementById("switcher_iOS");
t.addEventListener("click", function(){
console.log("i am", this.checked);
})
.toggle_iOS{
position: relative;
width: 58px;
height: 28px;
border-radius: 100px;
background-color: #1D8BF1;
overflow: hidden;
box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.05);
}
.toggle_iOS--switch{
position: absolute;
left: 2px;
top: 2px;
cursor: pointer;
bottom: 2px;
right: 57.5%;
background-color: #fff;
border-radius: 36px;
z-index: 1;
transition: 0.15s cubic-bezier(0.785,0.135,0.15,0.86);
transition-property: left,right;
transition-delay: 0s,.01s;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
[type=checkbox]:checked + .toggle_iOS--switch{
left: 57.5%;
right: 2px;
}
.toggle_iOS [type=checkbox]{
position: absolute;
display: block;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 6;
}
<div class="toggle_iOS">
<input type="checkbox" id="switcher_iOS">
<div class="toggle_iOS--switch"></div>
</div>

JQuery UI Tabs - Custom animation

I need to create animation like this - CODEPEN
Using JQuery UI Tabs - jQuery UI Tabs
Problem occur when I need to create animation for container. There is only show/hide option and don't support fx option in newest version. How I can accomplish it?
Main question: can somebody provide codepen/fiddle with custom function animation (so everybody will benefit) like function inside show/hide method? It is possible?.
$(document).ready(function() {
// Variables
var clickedTab = $(".tabs > .active");
var tabWrapper = $(".tab__content");
var activeTab = tabWrapper.find(".active");
var activeTabHeight = activeTab.outerHeight();
// Show tab on page load
activeTab.show();
// Set height of wrapper on page load
tabWrapper.height(activeTabHeight);
$(".tabs > li").on("click", function() {
// Remove class from active tab
$(".tabs > li").removeClass("active");
// Add class active to clicked tab
$(this).addClass("active");
// Update clickedTab variable
clickedTab = $(".tabs .active");
// fade out active tab
activeTab.fadeOut(250, function() {
// Remove active class all tabs
$(".tab__content > li").removeClass("active");
// Get index of clicked tab
var clickedTabIndex = clickedTab.index();
// Add class active to corresponding tab
$(".tab__content > li").eq(clickedTabIndex).addClass("active");
// update new active tab
activeTab = $(".tab__content > .active");
// Update variable
activeTabHeight = activeTab.outerHeight();
// Animate height of wrapper to new tab height
tabWrapper.stop().delay(50).animate({
height: activeTabHeight
}, 500, function() {
// Fade in active tab
activeTab.delay(50).fadeIn(250);
});
});
});
// Variables
var colorButton = $(".colors li");
colorButton.on("click", function() {
// Remove class from currently active button
$(".colors > li").removeClass("active-color");
// Add class active to clicked button
$(this).addClass("active-color");
// Get background color of clicked
var newColor = $(this).attr("data-color");
// Change background of everything with class .bg-color
$(".bg-color").css("background-color", newColor);
// Change color of everything with class .text-color
$(".text-color").css("color", newColor);
});
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
color: #50555a;
}
.main{
padding: 100px 20px;
}
nav {
z-index: 9;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 0;
text-align: center;
}
.bg-color {
background-color: #46a1de;
transition-duration: .5s;
}
.text-color {
color: #46a1de;
transition-duration: .5s;
}
footer {
padding: 40px 0;
text-align: center;
opacity: .33;
color: white;
}
.wrapper {
min-width: 600px;
max-width: 900px;
margin: 0 auto;
}
.tabs {
display: table;
table-layout: fixed;
width: 100%;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
.tabs > li {
transition-duration: .25s;
display: table-cell;
list-style: none;
text-align: center;
padding: 20px 20px 25px 20px;
position: relative;
overflow: hidden;
cursor: pointer;
color: white;
}
.tabs > li:before {
z-index: -1;
position: absolute;
content: "";
width: 100%;
height: 120%;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition-duration: .25s;
border-radius: 5px 5px 0 0;
}
.tabs > li:hover:before {
-webkit-transform: translateY(70%);
transform: translateY(70%);
}
.tabs > li.active {
color: #50555a;
}
.tabs > li.active:before {
transition-duration: .5s;
background-color: white;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.tab__content {
background-color: white;
position: relative;
width: 100%;
border-radius: 5px;
}
.tab__content > li {
width: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
list-style: none;
}
.tab__content > li .content__wrapper {
text-align: center;
border-radius: 5px;
width: 100%;
padding: 45px 40px 40px 40px;
background-color: white;
}
.content__wrapper h2 {
width: 100%;
text-align: center;
padding-bottom: 20px;
font-weight: 300;
}
.content__wrapper img {
width: 100%;
height: auto;
border-radius: 5px;
}
.colors {
text-align: center;
padding-top: 20px;
}
.colors > li {
list-style: none;
width: 50px;
height: 50px;
border-radius: 50%;
border-bottom: 5px solid rgba(0, 0, 0, 0.1);
display: inline-block;
margin: 0 10px;
cursor: pointer;
transition-duration: .2s;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
.colors > li:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
border-bottom: 10px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.colors > li.active-color {
-webkit-transform: scale(1.2) translateY(-10px);
transform: scale(1.2) translateY(-10px);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
border-bottom: 20px solid rgba(0, 0, 0, 0.15);
}
.colors > li:nth-child(1) {
background-color: #2ecc71;
}
.colors > li:nth-child(2) {
background-color: #D64A4B;
}
.colors > li:nth-child(3) {
background-color: #8e44ad;
}
.colors > li:nth-child(4) {
background-color: #46a1de;
}
.colors > li:nth-child(5) {
background-color: #bdc3c7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<div class="bg-color main">
<nav class="bg-color">Adaptive tabs</nav>
<section class="wrapper">
<ul class="tabs">
<li class="active">Colors</li>
<li>Favorite movies</li>
<li>About</li>
</ul>
<ul class="tab__content">
<li class="active">
<div class="content__wrapper">
<h2 class="text-color">Pick a color</h2>
<ul class="colors">
<li data-color="#2ecc71"></li>
<li data-color="#D64A4B"></li>
<li data-color="#8e44ad"></li>
<li class="active-color" data-color="#46a1de"></li>
<li data-color="#bdc3c7"></li>
</ul>
</div>
</li>
<li>
<div class="content__wrapper">
<h2 class="text-color">Her</h2>
<img src="http://lewihussey.com/codepen-img/her.jpg">
</div>
</li>
<li>
<div class="content__wrapper">
<h2 class="text-color">About</h2>
<p>Created by <a class="text-color" href="http://lewihussey.com" target="_blank">Lewi Hussey</a>
</p>
</div>
</li>
</ul>
</section>
<footer>By Lewi Hussey</footer>
</div>

CSS animation doesn't trigger after onclick event

I have css blocks that must go away from the page when they gain the .gone class.
I register a click event in Javascript, in the event handler I add the .gone class to the clicked element.
The bullet should go away to the left, or to the right, but it just disappears.
Here is the HTML code:
<div id="firstPage">
<div id="bullets">
<div data-href="#projects" class="top left">Projects</div>
<div data-href="#skills" class="top right">Skills</div>
<div data-href="#experiences" class="bottom left">Experiences</div>
<div data-href="#contact" class="bottom right">Contact</div>
</div>
</div>
The javascript code:
var bullets = [];
function openPage(e) {
e.preventDefault();
this.classList.add('gone');
}
var tmpBullets = document.querySelectorAll('#bullets div');
for(var i = 0 ; i < tmpBullets.length ; i++) {
tmpBullets[i].addEventListener('click', openPage, true);
bullets.push(tmpBullets[i]);
}
The CSS code:
html {
font-family: QuattrocentoSans;
overflow: hidden;
}
#firstPage {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../images/noise.png');
}
#firstPage h1 {
display: block;
margin: auto;
text-align: center;
margin-top: 100px;
font-family: Pacifico;
font-size: 50px;
color: #fff;
text-shadow: 0 0 3px #000;
}
#bullets {
display: block;
width: 320px;
margin: auto;
}
#bullets div {
position: absolute;
display: inline-block;
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
background-color: #333;
text-align: center;
color: white;
text-decoration: none;
margin-top: 10px;
margin-right: 5px;
margin-left: 5px;
text-shadow: 0 0 3px #999;
font-size: 1.2rem;
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
#bullets div.top {
top: 100px;
}
#bullets div.bottom {
top: 270px;
}
#bullets div.left {
left: calc(50% - 165px);
}
#bullets div.right {
right: calc(50% - 165px);
}
#bullets div:hover {
box-shadow: 0 0 10px #555;
transition: box-shadow 500ms;
}
#bullets div.left.gone {
left: -160px;
}
#bullets div.right.gone {
right: -160px;
}
See jsfiddle for live demo : http://jsfiddle.net/8u9j6n6x/
Thanks for your help

You need to add the transition to the .gone class not the #bullets div
#bullets div.gone {
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
updated fiddle http://jsfiddle.net/8u9j6n6x/1/