'DIV resizes on click but goes behind another DIV [vanilla JS]

I have three DIVs that complete the screen in a mobile device. Whenever these are clicked, the DIV resizes to fill up the screen and then the information appears.

It is all working as it should when I click it the first time. But after some other clicks, when the DIV starts to resize to fill up the screen or to go back to the original state, it grows behind another DIV until it suddenly pops-up in front of that DIV and continues on.

Also, I try to change the SPAN which is the Subtitle (class='sTitle') from position Absolute to Fixed. If I have it in Fixed since the beginning, the movement is not soft as if it is Absolute. But, I need it fixed because my scroll changes to horizontal when the DIV is enlarged. I have it commented in the JS code because it changes the style right away and there is no difference as if I just have its position in Fixed style from the beginning.

Thank you for your time. I'm starting to learn how to build websites as you may be able to see.

There is the code:

const thirdOne = document.querySelector('.thirdOne'),
  thirdOneSpan = document.querySelector('.thirdOneSpan'),
  txt1 = document.querySelector('.oneTxt1'),
  txt2 = document.querySelector('.oneTxt2'),
  txt3 = document.querySelector('.oneTxt3'),
  txt4 = document.querySelector('.oneTxt4'),
  txt5 = document.querySelector('.oneTxt5'),
  txt6 = document.querySelector('.oneTxt6'),
  txt7 = document.querySelector('.oneTxt7'),
  txt8 = document.querySelector('.oneTxt8'),
  txt9 = document.querySelector('.oneTxt9'),
  img1 = document.querySelector('.oneImg1'),
  img2 = document.querySelector('.oneImg2');

const thirdTwo = document.querySelector('.thirdTwo'),
  thirdTwoSpan = document.querySelector('.thirdTwoSpan'),
  txt21 = document.querySelector('.twoTxt1'),
  txt22 = document.querySelector('.twoTxt2'),
  txt23 = document.querySelector('.twoTxt3'),
  txt24 = document.querySelector('.twoTxt4'),
  txt25 = document.querySelector('.twoTxt5'),
  txt26 = document.querySelector('.twoTxt6'),
  txt27 = document.querySelector('.twoTxt7'),
  txt28 = document.querySelector('.twoTxt8'),
  txt29 = document.querySelector('.twoTxt9'),
  img21 = document.querySelector('.twoImg1'),
  img22 = document.querySelector('.twoImg2');

const thirdThree = document.querySelector('.thirdThree'),
  thirdThreeSpan = document.querySelector('.thirdThreeSpan'),
  txt31 = document.querySelector('.threeTxt1'),
  txt32 = document.querySelector('.threeTxt2'),
  txt33 = document.querySelector('.threeTxt3'),
  txt34 = document.querySelector('.threeTxt4'),
  txt35 = document.querySelector('.threeTxt5'),
  txt36 = document.querySelector('.threeTxt6'),
  txt37 = document.querySelector('.threeTxt7'),
  txt38 = document.querySelector('.threeTxt8'),
  txt39 = document.querySelector('.threeTxt9'),
  img31 = document.querySelector('.threeImg1'),
  img32 = document.querySelector('.threeImg2');

let clicked = 0;

let thirdOneSel = () => {
  thirdOne.scrollLeft = 0;
  thirdOne.classList.toggle('fullscreen');
  thirdOne.classList.toggle('bgBlue');
  thirdOne.classList.toggle('scrollable');
  thirdOneSpan.classList.toggle('topCenter');
  thirdOneSpan.classList.toggle('textTitle');
  txt1.classList.toggle('txtLeft');
  txt2.classList.toggle('txtRight');
  txt3.classList.toggle('txtLeft');
  txt4.classList.toggle('txtRight');
  txt5.classList.toggle('txtLeft');
  txt6.classList.toggle('txtRight');
  txt7.classList.toggle('txtLeft');
  txt8.classList.toggle('txtRight');
  img1.classList.toggle('hide');
  img1.classList.toggle('snap');
  img2.classList.toggle('hide');
  img2.classList.toggle('snap');
  if (clicked === 0) {
    thirdOne.style.zIndex = 1;
    // thirdOneSpan.style.position = 'fixed';
    clicked = 1;
  } else {
    thirdOne.style.zIndex = 0;
    // thirdOneSpan.style.position = 'absolute';
    clicked = 0;
  }
};

let thirdTwoSel = () => {
  if (clicked === 0) {
    thirdTwo.style.zIndex = 1;
    clicked = 1;
  } else {
    thirdTwo.style.zIndex = 0;
    clicked = 0;
  }
  thirdTwo.scrollLeft = 0;
  thirdTwo.classList.toggle('fullscreen');
  thirdTwo.classList.toggle('bgGreen');
  thirdTwo.classList.toggle('scrollable');
  thirdTwoSpan.classList.toggle('topCenter');
  thirdTwoSpan.classList.toggle('textTitle');
  txt21.classList.toggle('txtLeft');
  txt22.classList.toggle('txtRight');
  txt23.classList.toggle('txtLeft');
  txt24.classList.toggle('txtRight');
  txt25.classList.toggle('txtLeft');
  txt26.classList.toggle('txtRight');
  txt27.classList.toggle('txtLeft');
  txt28.classList.toggle('txtRight');
  img21.classList.toggle('hide');
  img21.classList.toggle('snap');
  img22.classList.toggle('hide');
  img22.classList.toggle('snap');

};

let thirdThreeSel = () => {
  thirdThree.scrollLeft = 0;
  thirdThree.classList.toggle('fullscreen');
  thirdThree.classList.toggle('bgBlue');
  thirdThree.classList.toggle('scrollable');
  thirdThreeSpan.classList.toggle('topCenter');
  thirdThreeSpan.classList.toggle('textTitle');
  txt31.classList.toggle('txtLeft');
  txt32.classList.toggle('txtRight');
  txt33.classList.toggle('txtLeft');
  txt34.classList.toggle('txtRight');
  txt35.classList.toggle('txtLeft');
  txt36.classList.toggle('txtRight');
  txt37.classList.toggle('txtLeft');
  txt38.classList.toggle('txtRight');
  img31.classList.toggle('hide');
  img31.classList.toggle('snap');
  img32.classList.toggle('hide');
  img32.classList.toggle('snap');
  if (clicked === 0) {
    thirdThree.style.zIndex = 1;
    // thirdThreeSpan.style.position = 'fixed';
    clicked = 1;
  } else {
    thirdThree.style.zIndex = 0;
    // thirdThreeSpan.style.position = 'absolute';
    clicked = 0;
  }
};

thirdOne.addEventListener('click', () => {
  thirdOneSel();
});

thirdTwo.addEventListener('click', () => {
  thirdTwoSel();
});

thirdThree.addEventListener('click', () => {
  thirdThreeSel();
});

.third {
  position: relative;
  height: 100vh;
  display: block;
  color: #000;
}

.third h1 {
  position: absolute;
  top: 2.2vh;
  left: 50%;
  font-size: 3.5vh;
  letter-spacing: 2vw;
  transform: translate(-50%, 0);
}

.third span {
  position: absolute;
  left: 50%;
  top: 30%;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 1);
  transform: translateX(-50%);
  text-align: center;
  transition: all 1s;
}

.thirdOne {
  position: absolute;
  top: 8vh;
  height: 31vh;
  width: 100%;
  border: 1px solid #fff;
  background: 50% / cover no-repeat url('./bg.jpg');
  background-color: rgb(78, 199, 255);
  overflow: hidden;
  transition: all 1.4s 0.5s;
}

.thirdOne p {
  position: absolute;
  width: 90%;
  left: 50%;
  font-weight: 400;
  font-size: 2vh;
  text-align: left;
  white-space: normal;
  color: #fff;
  transform: translateX(-50%);
}

.oneTxt1 {
  top: 10%;
  transition: all 1s 0.6s;
}

.oneTxt2 {
  top: 18%;
  transition: all 1s 0.8s;
}

.oneTxt3 {
  top: 56%;
  transition: all 1s 0.8s;
}

.oneTxt4 {
  top: 62%;
  transition: all 1s 1s;
}

.oneTxt5 {
  top: 68%;
  transition: all 1s 1.2s;
}

.oneTxt6 {
  top: 74%;
  transition: all 1s 1.4s;
}

.oneTxt7 {
  top: 78%;
  transition: all 1s 1.6s;
}

.oneTxt8 {
  top: 93%;
  width: 50% !important;
  transition: all 1s 1.8s;
  display: inline-block;
  letter-spacing: 0.3em;
  text-align: center !important;
}

.scroll2 p span {
  position: absolute;
  top: -2%;
  left: 95%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 7px double #fff;
  border-bottom: 7px double rgb(184, 179, 179);
  transform: rotate(225deg);
  opacity: 0;
  animation: scrollAnim2 2s infinite;
}

@keyframes scrollAnim2 {
  0% {
    transform: rotateX(0deg) rotate(225deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotateX(360deg) rotate(225deg) translate(-30px, 30px);
    opacity: 0;
  }
}

.oneImg1 {
  position: absolute;
  width: 100vw;
  height: 30vh;
  top: 24vh;
  left: 50%;
  transform: translateX(-50%);
  transition: all 1s 1.1s;
}

.oneImg2 {
  position: absolute;
  width: 100vw;
  height: 30vh;
  top: 60vh;
  left: 150%;
  transform: translateX(-50%);
}

.oneTxt9 {
  left: 150% !important;
  top: 10%;
}

.thirdTwo {
  position: absolute;
  top: 39vh;
  height: 31vh;
  width: 100%;
  border: 1px solid #fff;
  background: 50% / cover no-repeat url('./bg2.jpg');
  background-color: rgb(46, 136, 186);
  overflow: hidden;
  transition: all 1.4s 0.5s;
}

.thirdTwo p {
  position: absolute;
  width: 90%;
  left: 50%;
  font-weight: 400;
  font-size: 2.5vh;
  text-align: justify;
  white-space: normal;
  color: #fff;
  transform: translateX(-50%);
}

.twoTxt1 {
  top: 10%;
  transition: all 1s 0.6s;
}

.twoTxt2 {
  top: 17%;
  transition: all 1s 0.8s;
}

.twoTxt3 {
  top: 56%;
  transition: all 1s 0.8s;
}

.twoTxt4 {
  top: 63%;
  transition: all 1s 1s;
}

.twoTxt5 {
  top: 67%;
  transition: all 1s 1.2s;
}

.twoTxt6 {
  top: 74%;
  transition: all 1s 1.4s;
}

.twoTxt7 {
  top: 81%;
  transition: all 1s 1.6s;
}

.twoTxt8 {
  top: 93%;
  width: 50% !important;
  transition: all 1s 1.8s;
  display: inline-block;
  letter-spacing: 0.3em;
}

#scroll2 p span {
  position: absolute;
  top: -2%;
  left: 95%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 7px double #fff;
  border-bottom: 7px double rgb(184, 179, 179);
  transform: rotate(225deg);
  opacity: 0;
  animation: scrollAnim2 2s infinite;
}

.twoImg1 {
  position: absolute;
  width: 100vw;
  height: 30vh;
  top: 25vh;
  left: 50%;
  transform: translateX(-50%);
  transition: all 1s 1.1s;
}

.twoImg2 {
  position: absolute;
  width: 100vw;
  height: 30vh;
  top: 60vh;
  left: 150%;
  transform: translateX(-50%);
}

.twoTxt9 {
  left: 150% !important;
  top: 10%;
}

.thirdThree {
  position: absolute;
  top: 70vh;
  height: 30vh;
  width: 100%;
  border: 1px solid #fff;
  background: 90% / cover no-repeat url('./bg3.jpg');
  background-color: rgb(66, 112, 176);
  transition: all 1.4s 0.5s;
}

.thirdThree p {
  position: absolute;
  width: 90%;
  left: 50%;
  font-weight: 400;
  font-size: 2.5vh;
  text-align: justify;
  white-space: normal;
  color: #fff;
  transform: translateX(-50%);
}

.threeTxt1 {
  top: 10%;
  transition: all 1s 0.6s;
}

.threeTxt2 {
  top: 17%;
  transition: all 1s 0.8s;
}

.threeTxt3 {
  top: 56%;
  transition: all 1s 0.8s;
}

.threeTxt4 {
  top: 63%;
  transition: all 1s 1s;
}

.threeTxt5 {
  top: 67%;
  transition: all 1s 1.2s;
}

.threeTxt6 {
  top: 74%;
  transition: all 1s 1.4s;
}

.threeTxt7 {
  top: 81%;
  transition: all 1s 1.6s;
}

.threeTxt8 {
  top: 93%;
  width: 50% !important;
  transition: all 1s 1.8s;
  display: inline-block;
  letter-spacing: 0.3em;
}

.scroll2 p span {
  position: absolute;
  top: -2%;
  left: 95%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 7px double #fff;
  border-bottom: 7px double rgb(184, 179, 179);
  transform: rotate(225deg);
  opacity: 0;
  animation: scrollAnim2 2s infinite;
}

.threeImg1 {
  position: absolute;
  width: 100vw;
  height: 30vh;
  top: 25vh;
  left: 50%;
  transform: translateX(-50%);
  transition: all 1s 1.1s;
}

.threeImg2 {
  position: absolute;
  width: 100vw;
  height: 30vh;
  top: 60vh;
  left: 150%;
  transform: translateX(-50%);
}

.threeTxt9 {
  left: 150% !important;
  top: 10%;
}

.fullscreen {
  height: 100vh !important;
  top: 0 !important;
  transition: all 2s;
}

.topCenter {
  top: 1vh !important;
  /* position: fixed !important; */
  /* left: 50% !important;
    transform: translateX(-50%) !important; */
  transition: all 1s;
}

.topCenter2 {
  top: 2.2vh !important;
  transition: all 1s;
}

.textTitle {
  font-size: 3vh !important;
  /* transition: all 1s !important; */
}

.bgBlue {
  background: rgb(68, 133, 253) !important;
}

.bgGreen {
  background: rgb(24, 153, 33) !important;
}

.txtLeft {
  left: -100% !important;
  transition: all 0.5s !important;
}

.txtRight {
  left: 200% !important;
  transition: all 0.5s !important;
}

.scrollable {
  overflow-x: scroll !important;
  scroll-snap-type: x mandatory !important;
  position: fixed !important;
}

.snap {
  scroll-snap-align: start;
}

.hide {
  opacity: 0 !important;
  height: 0px !important;
  transition: all 0.6s !important;
}

.container {
  position: absolute;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

section {
  position: relative;
  height: 100vh;
  display: block;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

<div class="container">
  <section class="third" id="3">
    <h1 id="sTitle">TITLE</h1>
    <div class="thirdOne">
      <span class="thirdOneSpan">SUBTITLE</span>
      <p class="oneTxt1 txtLeft">Text</p>
      <p class="oneTxt2 txtRight">Text</p>
      <img src="./vid.gif" class="oneImg1 hide">
      <p class="oneTxt3 txtLeft">Text</p>
      <p class="oneTxt4 txtRight">Text</p>
      <img src="./vid2.gif" class="oneImg2 hide">
      <p class="oneTxt5 txtLeft">Text</p>
      <p class="oneTxt6 txtRight">Text</p>
      <p class="oneTxt7 txtLeft">Text</p>
      <div class="scroll2">
        <p class="oneTxt8 txtRight">scroll right<span class="scroll2"></span></p>
      </div>
      <p class="oneTxt9">Text</p>
    </div>
    <div class="thirdTwo">
      <span class="thirdTwoSpan">SUBTITLE</span>
      <p class="twoTxt1 txtLeft">Text</p>
      <p class="twoTxt2 txtRight">Text</p>
      <img src="./vid.gif" class="twoImg1 hide">
      <p class="twoTxt3 txtLeft">Text</p>
      <p class="twoTxt4 txtRight">Text</p>
      <img src="./vid2.gif" class="twoImg2 hide">
      <p class="twoTxt5 txtLeft">Text</p>
      <p class="twoTxt6 txtRight">Text</p>
      <p class="twoTxt7 txtLeft">Text</p>
      <div id="scroll2">
        <p class="twoTxt8 txtRight">scroll right<span class="scroll2"></span></p>
      </div>
      <p class="twoTxt9">Text</p>
    </div>
    <div class="thirdThree">
      <span class="thirdThreeSpan">SUBTITLE</span>
      <p class="threeTxt1 txtLeft">Text</p>
      <p class="threeTxt2 txtRight">Text</p>
      <img src="./vid.gif" class="threeImg1 hide">
      <p class="threeTxt3 txtLeft">Text</p>
      <p class="threeTxt4 txtRight">Text</p>
      <img src="./vid2.gif" class="threeImg2 hide">
      <p class="threeTxt5 txtLeft">Text</p>
      <p class="threeTxt6 txtRight">Text</p>
      <p class="threeTxt7 txtLeft">Text</p>
      <div id="scroll2">
        <p class="threeTxt8 txtRight">scroll right<span class="scroll2"></span></p>
      </div>
      <p class="threeTxt9">Text</p>
    </div>
  </section>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'DIV resizes on click but goes behind another DIV [vanilla JS]

Sources

Related Questions