Is there a way to restructure the code without needing to use z-index for the transition?
Without z-index: https://jsfiddle.net/Legcb42d/
.container1 {
position: relative;
width: 100%;
height: 100%;
}
.container1.slide {
height: auto;
min-height: 100%;
overflow: hidden;
}
.door-left,
.door-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 8s;
}
.door-left {
left: 0%;
background-color: rgb(91, 96, 106);
}
.door-right {
left: 50%;
background-color: rgb(229, 211, 211);
}
.container1.slide .door-left {
left: -50%;
}
.container1.slide .door-right {
left: 100%;
}
<div class="container1 ">
<div class="door-left"></div>
<div class="door-right"></div>
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
document.querySelector(".container1").classList.add('slide');
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const thewrap = cover.parentNode.querySelector(".container");
hide(cover);
show(thewrap);
}
const cover = document.querySelector(".jacketa");
cover.addEventListener("click", coverClickHandler);
}());
It's not supposed to look like this.
Without z-index: https://jsfiddle.net/Legcb42d/
https://i.sstatic.net/hYgkf.png
This is how it should look.
With z-index: https://jsfiddle.net/rspxkyoL/