Adding Pagination

[asasass]

What I am thinking.

https://jsfiddle.net/yqp0ew26/

https://jsitor.com/GH2zfJ9tR

Page 1
Blue Button .exitPage2 goes to class .container2
Purple Button .exitPage3 goes to class .container3

<button class=exit exitpPage2 type=button aria-label=Open></button>
<button class=exit exitpPage3 type=button aria-label=Open></button>

Page 2
Red Button .exit Page1 goes to class .container1
Purple Button .exitPage3 goes to class .container3

<button class=exit type=button aria-label=Open></button>
<button class=exit exitpPage3 type=button aria-label=Open></button>

Page 3
Blue Button .exitPage2 goes to class .container2
Red Button .exit Page1 goes to class .container1

<button class=exit type=button aria-label=Open></button>
<button class=exit exitpPage2 type=button aria-label=Open></button>

[asasass]

When .container1 becomes unhidden, .container2 and .container3 should be hidden.

When .container2 becomes unhidden, .container1 and .container3 should be hidden.

When .container3 becomes unhidden, .container2 and .container1 should be hidden.

@PaulOB

Do you understand this?

I was given this code:

If you have a show and hide class on the elements you can identify them.

Loop the elements with the hide class and remove it, then add the show class. Use the event target to get to the container of the click target and add the hide class to it.

const buttons = document.querySelectorAll("button");
const sections = document.querySelectorAll("section");

buttons.forEach((btn) => {
  btn.addEventListener("click", ({ currentTarget }) => {
    const hidden = document.querySelectorAll(".hide");
    hidden.forEach((ele) => {
      ele.classList.remove("hide");
      ele.classList.add("show");
    });
    currentTarget.parentElement.classList.remove("show");
    currentTarget.parentElement.classList.add("hide");
  });
});

[PaulOB]

@asasass

Do you understand this?

I was given this code:

That’s basically what you were doing in your original page before you pulled the code out.

It’s similar to the code in my demo except I used data attributes to point to the page required and my example will do pagination simply by adding another button and putting a data attribute on it.

The pagination is no problem but the bigger problem is in resetting the videos which was built in to your original. There is also the questions of animation on each page which you seem to have removed now.

Endlessly tweaking something is not a viable way to build as you just end up bending code to do something it wasn’t designed for.

[asasass]

I don’t have an issue with the animation being removed.

I am able to click the play buttons here.

https://jsfiddle.net/cz7bj5ea/

Is the code you provided or I did able to work in it?

[PaulOB]

@asasass

https://jsfiddle.net/cz7bj5ea/

In that page you’d need to set up the actions you want to happen in the exit button click handler. At the moment all you have is a scrollTo routine there.

You would need to fill in these details.

  function exitClickHandler(e) {
    if (e.target.classList.contains("exitpPage2")) {
      // show page2 and do all the stuff you need here.
      //  e.g. show container2 and hide container 3 and 1
      // hide / reset running videos etc.
      console.log('Page2');
    }
    if (e.target.classList.contains("exitpPage3")) {
      // show page3 and do all the stuff you need here.
      //  e.g. show container3 and hide container 2 and 1
      // hide / reset running videos etc.
      console.log('Page3');
    }

    window.scrollTo(0, 0);
  }

[asasass]

This would go in there?

oh, wait, this is different from what you have.

    const buttons = document.querySelectorAll("button");
    const sections = document.querySelectorAll("section");
    
    buttons.forEach((btn) => {
      btn.addEventListener("click", ({ currentTarget }) => {
        const hidden = document.querySelectorAll(".hide");
        hidden.forEach((ele) => {
          ele.classList.remove("hide");
          ele.classList.add("show");
        });
        currentTarget.parentElement.classList.remove("show");
        currentTarget.parentElement.classList.add("hide");
      });
    });

I haven’t written code like this in a long time.

      document.querySelector(".add").classList.add("active");
      document.querySelector(".add").classList.remove("add");

      document.querySelector(".remove").classList.remove("active");
      document.querySelector(".remove").classList.remove("remove");

[asasass]

I need 3.

 function exitClickHandler(e) {
    if (e.target.classList.contains("exit")) {
      // show exitpPage2 and do all the stuff you need here.
      //  e.g. show container2 and hide container 2 and 3
      // hide / reset running videos etc.
      console.log('Page1');
    }
    if (e.target.classList.contains("exitPage2")) {
      // show page2 and do all the stuff you need here.
      //  e.g. show container2 and hide container 1 and 3
      // hide / reset running videos etc.
      console.log('Page2');
    }
    if (e.target.classList.contains("exitPage3")) {
      // show page3 and do all the stuff you need here.
      //  e.g. show container3 and hide container 2 and 1
      // hide / reset running videos etc.
      console.log('Page3');
    }

    window.scrollTo(0, 0);
  }

[asasass]

I think I did it. https://jsfiddle.net/w3Lrt6o8/1/

  function exitClickHandler(e) {
    if (e.target.classList.contains("exit")) {
      document.querySelector(".container2").classList.add("hide");
      document.querySelector(".container3").classList.add("hide");
      document.querySelector(".container1").classList.remove("hide");
      console.log('Page1');
    }
    if (e.target.classList.contains("exitPage2")) {
      document.querySelector(".container1").classList.add("hide");
      document.querySelector(".container3").classList.add("hide");
      document.querySelector(".container2").classList.remove("hide");
      console.log('Page2');
    }
    if (e.target.classList.contains("exitPage3")) {
      document.querySelector(".container2").classList.add("hide");
      document.querySelector(".container1").classList.add("hide");
      document.querySelector(".container3").classList.remove("hide");
      console.log('Page3');
    }
    window.scrollTo(0, 0);
  }

[asasass]

I was able to improve it like this. https://jsfiddle.net/ancx6j5L/2/

function resetVideos(videoSelector) {
    const allVideos = document.querySelectorAll(videoSelector);

    function showVideo(video) {
      video.classList.remove("active");
    }
    allVideos.forEach(showVideo);
  }

  function hideContainers(containerSelector) {
    const allContainers = document.querySelectorAll(containerSelector);

    function hideContainer(container) {
      container.classList.add("hide");
    }
    allContainers.forEach(hideContainer);
  }

  function showContainers(containerSelector) {
    const allContainers = document.querySelectorAll(containerSelector);

    function showContainer(container) {
      container.classList.remove("hide");
    }
    allContainers.forEach(showContainer);
  }

  function resetPage() {
    resetVideos(".embed-youtube");
  }

  function exitClickHandler(e) {
    if (e.target.classList.contains("exit")) {
      hideContainers(".container2, .container3");
      showContainers(".container1");
      resetPage();
      console.log('Page1');
    }
    if (e.target.classList.contains("exitPage2")) {
      hideContainers(".container1, .container3");
      showContainers(".container2");
      resetPage();
      console.log('Page2');
    }
    if (e.target.classList.contains("exitPage3")) {
      hideContainers(".container2, .container1");
      showContainers(".container3");
      resetPage();
      console.log('Page3');
    }
    window.scrollTo(0, 0);
  }