You’re showing me all this stuff, but I don’t know how to implement it in here:
https://jsfiddle.net/3zs2bvha/
And I don’t know if it will work.
To see it working in the code would help.
There are 3 container classes,
when 1 of them is clicked on,
2 container classes are hidden,
where 1 of them becomes visible.
Each of the 3 containers hold 2 buttons.
These are the 3 button.
When 1 of them is clicked on, the other 2 get hidden.
<button class="exit" type="button" aria-label="Open"></button>
<button class="exit exitpPage2" type="button" aria-label="Open"></button>
<button class="exit exitpPage3" type="button" aria-label="Open"></button>
I’m just giving you some ideas. We did not code this and we can’t be expected to keep track of all the code every time you want to implement something new.
You need to be able to abstract the problem you are trying to solve out of the more simple examples you are given. Or to abstract it into simple examples to show.
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.
Example
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.
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.
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?
What happens when you unhide the containers?
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>
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>