Trying to figure out how to get fade to work

How many of these would I need to make?

For what I am trying to do?

If 1 of the buttons was working in the code using that, I might be able to figure out the rest of it on my own.

This is confusing.

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’m familiar with this:

(function showContainer() {

  function hide(el) {
    el.classList.add("hide");
  }

  function show(el) {
    el.classList.remove("hide");
  }

  function exitClickHandler() {
    const thewrap = document.querySelector(".container3");
    show(thewrap);
    const cover = document.querySelector(".container1");
    hide(cover);
  }

  const covers = document.querySelectorAll(".exit, .exitPage2");
  covers.forEach(function addCoverListener(cover) {
    cover.addEventListener("click", exitClickHandler);
  });
})();

One. I’m not sure I understand why you would need more?

It’s just an implementation idea you will have to take the idea and see if/how you can use it with your own project.


There is so much information and guided projects out there for you to learn from.

Seriously, take the time to learn more about what you need to know and I promise you this will all become so much easier.

1 Like

Would you be able to hook 1 button up to it to get me started?

We (still) aren’t a ‘write code for you for free’ platform.

Doing the work for you would delay the fact that you really, really need to learn some fundamentals.

If you can’t abstract code out from an implementation you do not understand the code.

What if this was a totally new project and you had to do it all over again? What if you started with a blank editor? How would you do what you wanted to do with no starting code?

It is like reading a map. Just because you know where something is in the world and can walk to it doesn’t mean you know how to use a map to guide you to a different place. If you know how to use a map, you can get to anywhere you want to go. The map is JS, learn it better so you can go places.

1 Like

I don’t understand.

I have 2 buttons on 3 container classes.

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.

Like this?

I’m already confused.

I don’t understand it at all.

<section class="section show">
  <div class="container1 ">
    <div class="curtain1 remove">
      <div class="ratio-keeper">
        <div class="video-one"></div>
        <div class="wrap embed-youtube ">
          <div class="video embed-youtube  " data-id="djV11Xbc914">
          </div>
          <button class="playa cover playgreen  embed-youtube-play" type="button" aria-label="Open"></button>
        </div>
      </div>

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

It’s not working in the code:
https://jsfiddle.net/j9h8azrf/4/)

<section class="section show">
  <div class="container1 ">
    <div class="curtain1 remove">
      <div class="ratio-keeper">
        <div class="video-one"></div>
        <div class="wrap embed-youtube ">
          <div class="video embed-youtube  " data-id="djV11Xbc914">
          </div>
          <button class="playa cover playgreen  embed-youtube-play" type="button" aria-label="Open"></button>
        </div>
      </div>

      <button class="exit exitpPage2" type="button" aria-label="Open"></button>
      <button class="exit exitpPage3" type="button" aria-label="Open"></button>
    </div>
  </div>
</section>
<section class="section hide">
  <div class="container2 hide">
    <div class="container ">
      <div class="curtain remove">
        <div class="ratio-keeper">
          <div class="video-two"></div>
          <div class="wrap embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playb cover embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
      </div>
      <div class="curtain remove">
        <div class="ratio-keeper">
          <div class="video-three"></div>
          <div class="wrap embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playc cover embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
      </div>
      <div class="curtain remove">
        <div class="ratio-keeper">
          <div class="video-four"></div>
          <div class="wrap embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playd cover embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
      </div>
      <div class="curtain remove">
        <div class="ratio-keeper">
          <div class="video-five"></div>
          <div class="wrap embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playe cover embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
      </div>
      <div class="curtain remove">
        <div class="ratio-keeper">
          <div class="video-six"></div>
          <div class="wrap embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playf cover embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
        <button class="exit" type="button" aria-label="Open"></button>
        <button class="exit exitpPage3" type="button" aria-label="Open"></button>
      </div>
    </div>
  </div>
</section>
<section class="section hide">
  <div class="container3 hide">
    <div class="container ">
      <div class="curtain remove">
        <div class="ratio-keeper">
          <div class="video-seven"></div>
          <div class="wrap embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playg cover embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
      </div>
      <div class="curtain remove">
        <div class="ratio-keeper">
          <div class="video-eight"></div>
          <div class="wrap embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playh cover embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
      </div>
      <div class="curtain remove">
        <div class="ratio-keeper">
          <div class="video-nine"></div>
          <div class="wrap embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playi cover embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
      </div>
      <div class="curtain remove">
        <div class="ratio-keeper">
          <div class="video-ten"></div>
          <div class="wrap embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playj cover embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
      </div>
      <div class="curtain remove">
        <div class="ratio-keeper">
          <div class="video-eleven"></div>
          <div class="wrap embed-youtube">
            <div class="video embed-youtube" data-id="djV11Xbc914">
            </div>
            <button class="playk cover embed-youtube-play" type="button" aria-label="Open"></button>
          </div>
        </div>
        <button class="exit" type="button" aria-label="Open"></button>
        <button class="exit exitpPage2" type="button" aria-label="Open"></button>
      </div>
    </div>
  </div>
</section>

Each container holds 2 buttons, not 1.

2 buttons that unhide 2 different containers.

Try learning JavaScript fundamentals.

Seriously. Designing an app is hard. Using a programming language is hard. Make your life easier and fight fewer things at once.

I can only do it if you’re able to guide me through it.

You don’t need one of us to personally guide you through a JavaScript fundamentals course. We can answer questions though.

What did I do wrong in here that it is not working?

https://jsfiddle.net/shn5yjwe/

Everything is broken.

Videos aren’t clickable anymore.

Have you tried to learn JavaScript fundamentals?

Can you try to explain in words (no code) what your ultimate end goal (or goals) is for this project. You keep changing the scope of it as if you don’t really know what you want the project to be when it is complete (or at least 95% complete).

Is one of the goals to only ever have one container (video screen) showing at a time? If not, then why do you want to hide them. If it is one of your goals, then why even create a container until you are ready to see it?

What happens when you unhide the containers?

https://jsfiddle.net/tc9d7grk/

I don’t understand how to hook this up to my code:

https://jsfiddle.net/tc9d7grk/

And if it will even work in there to begin with.

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");
  });
});

<section class="section show">
  <button>Section 1</button>
</section>
<section class="section hide">
  <button>Section 2</button>
</section>
<section class="section hide">
  <button>Section 3</button>
</section>
<section class="section hide">
  <button>Section 4</button>
</section>

Why do you want to hook this code into your code? Instead of trying to hack your way to a solution, why don’t you try to explain what you are trying to accomplish with the code? Also, you will get more helpful guidance when you answer our questions. Otherwise, most users will just start ignoring your posts as it may appear you are not interested in learning and more interested in someone just giving you a solution.

What I am try to do or have occur in the code.

There are 3 container classes, when 1 of them is clicked on, 2 container classes are hidden, where 1 of them becomes visible.

All I am doing is hiding and unhiding CSS container classes via clicking on a button.

I added the CSS in. The buttons are visible. The Buttons go to specific CSS classes/containers/pages which I set up. I’m having a lot of trouble figuring out how to connect the two.

The buttons with the corresponding CSS classes that they go to in the code. You would click on a button and it should take you to a specific CSS class/page that it goes to.

<div class="container1 ">
   <button class="exit exitpPage2" type="button" aria-label="Open"></button>
   <button class="exit exitpPage3" type="button" aria-label="Open"></button>
</div>
<div class="container2 hide">
   <button class="exit" type="button" aria-label="Open"></button>
   <button class="exit exitpPage3" type="button" aria-label="Open"></button>
</div>
<div class="container3 hide">
   <button class="exit" type="button" aria-label="Open"></button>
   <button class="exit exitpPage2" type="button" aria-label="Open"></button></div>

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.

Flow of the buttons

Page 1 These buttons should be visible.

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 These buttons should be visible.

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

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

Page 3 These buttons should be visible.

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>

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

When 1 of 2 buttons is clicked on, the other 2 containers get hidden.

That is all I am doing.