show hide alternate div on button click - javascript

Hi I am trying to implement a js/jquery program in which the steps are as follow
when someone click button 1 then wrapper div first is hide and wrapper div of 2 button (second ) is shown . similarly for third and forth
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">1</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">2</button>
</div>
</div>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">3</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">4</button>
</div>
</div>
I have tried this but know it will not work
<script type="text/javascript">
$('.button').on('click', function(e){
console.log($( this));
$( this ).closest(".wrapper .second").hide();
});
</script>


you could just toggle a class:
$('.button').on('click', function() {
$(this).closest('div').add($(this).closest('.wrapper').find('.hidden')).toggleClass('hidden');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">1</button>
</div>
<div class="second hidden">
<div class="content">content2</div>
<button class="button">2</button>
</div>
</div>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">3</button>
</div>
<div class="second hidden">
<div class="content">content2</div>
<button class="button">4</button>
</div>
</div>
JS:
$('.button').on('click', function () {
$(this).closest('div').add($(this).closest('.wrapper').find('.hidden')).toggleClass('hidden');
});
CSS:
.hidden {
display: none;
}
-jsFiddle-


I would check what the parent class is. If its first hide element and show the next, else hide element and show prev, like so:
$('.button').on('click', function(e){
if($(this).parent().attr('class')=='first'){
$(this).parent().hide();
$(this).parent().next().show();
}else{
$(this).parent().hide();
$(this).parent().prev().show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">1</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">2</button>
</div>
</div>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">3</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">4</button>
</div>
</div>


Keeping your HTML the same, replace your javascript with:
$('.button').on('click', function(e){
$( this ).closest(".wrapper").find(":hidden").show();
$( this ).closest("div").hide();
});
$('.second').hide();
See jsFiddle

Related

Get throu each div and change class on Button-click

Heyo,
I cant figure out how to make a Script work like this: I want to have a Button that changes the Class of div's on click. But I don't want to make it change all the div's at the same time. I only want to change the first div on the first click, the second div on the second click and so on and so forth.
I've allredy tryed it but failed. Heres the code:
$('button').click(function() {
// give first $(.div).addClass('active') on first click, second div on second click ...
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>

With the .eq method, you can pass the index of the element you want, and the jQuery collection of only that element will be returned. Start with an index of 0, increment it on every button click, and add the class to the appropriate element:
let i = 0;
$('button').click(function() {
$('.div').eq(i).addClass('active');
i++;
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>

Here a little one liner that grabs the first element that doesn't has the active class.
$('button').click(function() {
$('.div:not(.active):first').addClass('active');
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>

You can find the first element and add the active class on that. Then rotate the class so on.
$('button').click(function() {
var activeElem = $('.outer').find('.inner.active');
if(activeElem.length){
activeElem.removeClass('active');
activeElem.next('.inner').addClass('active');
} else {
$('.outer').find('.inner').first().addClass('active');
}
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="inner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>

Increment for each click and apply:
var count = 0;
$('button').click(function() {
$('.inner:eq('+count+')').addClass('active');
count++;
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="inner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>

Clicking popup button

I need to do a function that
if class="btn btn-default" exists
click them
this would be problematic bcz there are more btn defaults besides this ones :D
so how do i work with the "Chest unlocked"
<div class="chest_container">
<div class="chest unlocked"></div>
Here's the html
<div id="daily_bonus_content">
<div class="rewards_grid">
<div class="reward day_1">
<div class="center">
<div class="chest_container">
<div class="chest unlocked"></div>
<div class="day">1</div>
<div class="actions">Abrir</div>
</div>
</div>
</div>
<div class="reward day_2">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">2</div>
<div class="actions"></div>
</div>
</div>
</div>
<div class="reward day_3">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">3</div>
<div class="actions"></div>
</div>
</div>
</div>
<div class="reward day_4">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">4</div>
<div class="actions"></div>
</div>
</div>
</div>

In vanillaJS, clicking every btn-default in a chest_container
var buttons = document.querySelector(".chest_container .btn-default");
buttons.forEach(function(button) {
button.click();
});
If you catch the click in an event, you can reach the chest_unlocked by doing the following, where e is the event:
var chestUnlockedDiv = e.target.parentElement.parentElement.querySelector(".chest.unlocked");

How to trigger an event on specific html element with class in vanilla javascript

I'm trying to refactor my jquery code to vanilla because I want to use js properly. But I'm having a problem. I cannot figure out how for example trigger event only on third element with specific class. Because querySelector always returns the first element with that class for example this is my half finished code
const box = document.querySelector('.media-page--box-container');
$(box).on('mouseenter', () => {
// $(this). => select hovered element and do something only on it
console.log('enter')
}).on('mouseleave', () => {
console.log('leave')
});
.media-page--box-container:not(:first-child){
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
You can find example in the snippet

Use the code below if you want to add a listener to one element.
const box = document.querySelector('.media-page--box-container');
box.addEventListener("click", function() {
console.log("Clicked!");
});
<div class="media-page--box-container">.media-page--box-container</div>
Or this code for few elements
const boxes = document.querySelectorAll('.media-page--box-container');
boxes.forEach(function(box){
box.addEventListener("click", function() {
console.log("Clicked!");
});
});
<div class="media-page--box-container">.media-page--box-container 1</div>
<div class="media-page--box-container">.media-page--box-container 2</div>
<div class="media-page--box-container">.media-page--box-container 3</div>
querySelector returns one object, querySelectorAll and getElementsByClassName return array of objects. Not getElementsByClassName require class name, not selector in parameters.
console.log("querySelector", document.querySelector('.media-page--box-container'));
console.log("querySelectorAll", document.querySelectorAll('.media-page--box-container'));
console.log("getElementsByClassName", document.getElementsByClassName('media-page--box-container'));
<div class="media-page--box-container">.media-page--box-container 1</div>
<div class="media-page--box-container">.media-page--box-container 2</div>
<div class="media-page--box-container">.media-page--box-container 3</div>
Note, if there will be no elements on the page, methods will return null. So, you should check this case. If box will null, the code will break with an error.
const box = document.querySelector('.media-page--box-container');
console.log("box value", box);
// Wrong:
box.addEventListener("click", function() {
console.log("Clicked!");
});
// Correct:
if (box !== null)
box.addEventListener("click", function() {
console.log("Clicked!");
});
<div class="media-page--box-container-A">.media-page--box-container-A</div>
<div class="media-page--box-container-B">.media-page--box-container-B</div>

This answer should highlight a few things. You may need to handle event bubbling differently. I added e.target to the hover message. Your target is a block element that will trigger the mouse events even where you can't see it so I highlighted it in red. querySelectorAll will grab all elements not just the first one the way querySelector works.
const boxes = document.querySelectorAll('.media-page--box-container');
boxes[2].addEventListener("mouseover", myMouseover );
boxes[2].addEventListener("mouseleave", myMouseout);
function myMouseover(e) {
console.log('enter' + e.target);
}
function myMouseout() {
console.log('leave');
}
.media-page--box-container:not(:first-child) {
margin-top: 50px;
}
.media-page--box-container {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>

You can use querySelectorAll to retrieve all nodes matching your selector.
Because it returns a NodeList, which is an array-like object, you can traverse that by invoking array.prototype.foreach and passing through the nodelist.
From there you can add event listeners to each item in the node list, or any individual node based on the iterator.
const boxes = document.querySelectorAll('.media-page--box-container');
Array.prototype.forEach.call(boxes, (box, i) => {
if (i===2) {
box.addEventListener('mouseenter', () => {
console.log('enter')
});
box.addEventListener('mouseleave', () => {
console.log('leave')
});
}
});
.media-page--box-container:not(:first-child){
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>

fadeOut() only fades out the first element

By default, I have several DIVs hidden and then I fade them in when the user clicks on a certain button. That works fine but when I try to close a .holder DIV using a span within said .holder DIV, only the first one works. When I click the others, nothing happens. I get no error or any sort of visual feedback whatsoever.
The markup:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
The jQuery:
$(document).ready(function() {
$('#close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
What exactly am I doing wrong here? I'm using jQuery 1.10.2 if that makes any difference.
I'd demo the code on jsFiddle but is seems to be down atm.

You can not have the same id of two element on the page. If you want to do that give it as a class name like -
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the Jquery like -
$(document).ready(function() {
$('.close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
Hope this will help.

Here is how it should be:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the JavaScript:
$(document).ready(function() {
$('.close').click(function(e) {
$(this).parents('.holder').forEach(function(){
$(this).fadeOut(250);
});
e.preventDefault();
});
});

How to change the div with repect to the menu selection

I have a vertical menu.When I click on the first menu i want to show the corresponding div on right side.Two div is possible through it.But cannot do others.How can I do this?
script is
$(function() {
$(".box").hide();
$("#master").click(function(){
$("#leftpanel").show();
$(".box1").show();
});
$("#country").click(function(){
$(".box").hide();
$(".box1").show();
});
$("#currency").click(function(){
$(".box").hide();
$(".box2").show();
});
$("#city").click(function(){
$(".box").hide();
$(".box3").show();
});
$("#EmissionsCountry").click(function(){
$(".box4").show();
$(".box").hide();
});
$("#EmissionsFuel").click(function(){
$(".box5").show();
$(".box").hide();
});
$("#IfcIndustrySector").click(function(){
$(".box6").show();
$(".box").hide();
});
$("#ReTechnologyType").click(function(){
$(".box7").show();
$(".box").hide();
});
$("#Unit").click(function(){
$(".box8").show();
$(".box").hide();
});
$("#Energy").click(function(){
$(".box9").show();
$(".box").hide();
});
});
Html is
<div id="container">
<div id="leftpanel">
<div id="menu1">
<div>
Country
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
Currency
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
City
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
EmissionsCountry
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
EmissionsFuel
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
IfcIndustrySector
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
ReTechnologyType
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
Unit
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
<div id="menu1">
<div>
Energy
</div>
<div class="imagediv">
<div class="image"><img src="arrow.gif"/></div>
</div>
</div>
</div>
<div id="rightpanel">
<div class="box1 box" id="country">
country
</div>
<div class="box2 box" id="currency">
currency
</div>
<div class="box3 box" id="city">
city
</div>
<div class="box4 box" id="EmissionsCountry">
EmissionsCountry
</div>
<div class="box5 box" id="EmissionsFuel">
EmissionsFuel
</div>
<div class="box6 box" id="IfcIndustrySector">
IfcIndustrySector
</div>
<div class="box7 box" id="ReTechnologyType">
ReTechnologyType
</div>
<div class="box8 box" id="Unit">
Unit
</div>
<div class="box9 box" id="Energy">
Energy
</div>
</div>
</div>
You can see the demo from FIDDLE

I changed your code a little bit and added data-box so you know which .box you show.
FIDDLE
$(function () {
$(".box").hide();
$('.menu1').click(function () {
var boxid = $(this).data('box');
$('.box').hide();
$('.box' + boxid).show();
});
});
I think this will simplify your script a lot and make it more easier to change.
The actuall problem in you HTML is that you don't have IDs assigned to <a>. You only have IDs for the first 2 menu elements and in your script you use
.show(); // this will show the box you need
.hide(); // but then you hide all the boxes
//(even the one you need because it has the class .box)
//Instead use
.hide(); // hide all the boxes
.show(); // show the one you need
FIDDLE with your code <-- added IDs and corrected script show/hide

If youre going to do it this way(by giving divs multiple class names) you should have your .hide functions ALWAYS first in the javascript above, and your .show ALWAYS second. Whats happening is you're showing all elements with a class name of box4, but then hiding all the elements with a class name of box, which includes box4 and the other later divs, so you show it, but then make it hide RIGHT after.
Hope this helps

Categories

Resources