We Keep Coding

JS: How to make sure only child div is toggled on click

Given example is working fine but red color is showing under Box2 only.
How to make sure if box1 is clicked then red should show below Box1,
if Box2 is clicked box should show below box 2.
CODEPEN
function hideshowmenu() {
var element = document.getElementsByClassName("box");
element[0].classList.toggle("bg-red");
}
.bg-red {
margin-top: 10px;
background-color: red;
height: 20px;
}
<div class="mainmenu " onclick="hideshowmenu()">BOX1</div>
<div id="box" class="box"></div>
<div class="mainmenu " onclick="hideshowmenu()">BOX2</div>
<div id="box" class="box"></div>
only one red should show at one time.

First, the box-id is duplicated, not allowed in HTML. Next, using Event Delegation makes your life easier. If you want the class of div.box after a clicked div.mainmenu element to be bg-red, the next snippet may be an idea (note: creates 100 div.mainmenu elements after the handler is assigned).
document.addEventListener(`click`, handle);
createSomeBoxes();
function handle(evt) {
if (evt.target.classList.contains(`mainmenu`)) {
//^ act only on div.mainmenu
const currentBox = document.querySelector(`.bg-red`);
currentBox && currentBox.classList.remove(`bg-red`);
return currentBox && currentBox.previousElementSibling === evt.target
? true : evt.target.nextElementSibling.classList.add(`bg-red`);
}
}
// for demo
function createSomeBoxes() {
let nBoxes = 0;
while(nBoxes++ < 100) {
document.body.insertAdjacentHTML(`beforeend`,
`<div class="mainmenu">BOX ${nBoxes}</div>
<div class="box"></div>`);
}
}
body {
margin: 2rem;
font: 12px/15px verdana, arial;
}
.mainmenu {
cursor: pointer;
}
.bg-red {
margin-top: 2px;
background-color: red;
height: 20px;
width: 20vw;
}

You only trigger [0]
I would delegate
I also removed ID since IDs need to be unique
const container = document.getElementById("container");
const boxes = container.querySelectorAll(".box")
container.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("mainmenu")) {
const thisBox = tgt.nextElementSibling;
boxes.forEach(box => {
if (box != thisBox) box.classList.remove("bg-red");
})
thisBox.classList.toggle("bg-red");
}
})
.bg-red {
margin-top: 10px;
background-color: red;
height: 20px;
}
<div id="container">
<div class="mainmenu">BOX1</div>
<div class="box"></div>
<div class="mainmenu">BOX2</div>
<div class="box"></div>
</div>

First remove the id's, you dont need them (and theyre not unique so they arent valid anyways).
Then youll need to iterate trough all your .mainmenu items and bin a click to hide all boxes and open the one right besides the item you clicked.
document.querySelectorAll(".mainmenu").forEach(function(menuElement) {
menuElement.addEventListener("click", function() {
document.querySelectorAll(".box").forEach(function(boxElement) {
boxElement.classList.remove("bg-red");
});
this.nextElementSibling.classList.toggle("bg-red");
});
});
.bg-red {
margin-top: 10px;
background-color: red;
height: 20px;
}
<div class="mainmenu">BOX1</div>
<div class="box"></div>
<div class="mainmenu">BOX2</div>
<div class="box"></div>
<div class="mainmenu">BOX3</div>
<div class="box"></div>
<div class="mainmenu">BOX4</div>
<div class="box"></div>
<div class="mainmenu">BOX5</div>
<div class="box"></div>
<div class="mainmenu">BOX6</div>
<div class="box"></div>
<div class="mainmenu">BOX7</div>
<div class="box"></div>

You should use event object to get a target node, and then append div with the class after it. The after function will move the div each time.
<div class="mainmenu" onClick="hideshowmenu(event)">BOX1</div>
<div class="mainmenu" onClick="hideshowmenu(event)">BOX2</div>
const redBox = document.createElement('div');
redBox.classList.add('bg-red');
function hideshowmenu(event) {
const elem = event.target;
elem.after(redBox)
}
https://jsfiddle.net/hj0rgkfp/

How to make jquery scrolling effect work on multiple element/classes?

I'm trying to make a very light script for multiple classes class"demo" that can work on my onScrollDown responsive animation.
I don't really understand about writing arrays. but, I believe that if I use document.getElementsByClassName("demo")[i] , i < 0 and some function(i) I can implement it for individual classes. Because I use getBoundingClientRect() instead of fixed value.
So, how can I write it correctly using i as arrays?
Thank you..
Here is my working script :
<script>
var e = document.getElementById("demo");
var rect = e.getBoundingClientRect();
var x = rect.top;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > x-300) {
$('#demo').addClass('animate');
} else {
$('#demo').removeClass('animate');
}
});
</script>
*work only for a single element.
Here is what I'm trying to do, that not working yet
<script>
var e = document.getElementsClassName("test")[i];
var rect = e.getBoundingClientRect();
var x = rect.top;
var i;
for (i = 0; i < e.length; i++) {
$(window).bind('scroll', function (i) {
if ($(window).scrollTop() > x-300) {
$e.addClass('animate');
} else {
$e.removeClass('animate');
}
});
}
</script>
CSS :
<style>
.test {
background:#345;
color:#FFF;
height:2em;
padding:.5em;
top:50px;
margin-top: 100px;
width:100%;
}
.animate {
width: 60px;
}
</style>
HTML
<div style="color: red; margin-bottom: 400px;">(Top!)</div>
<div class="test" id="demo">Menu</div>
<div class="test" id="demo">Menu</div>
<div class="test" id="demo">Menu</div>
<div style="color: red; margin-top: 400px;">(Bottom!)</div>

Okay so I've achieved what you're trying to do. Here are the changes I made:
Used the JQuery each function. This will loop all of the demo elements every time a scroll is detected. There are other ways of looping the elements but because you've already imported JQuery we may as well use it's functions.
Changed #demo to .demo. In other words, I've changed id to class. id should only be used when working with elements that are completely unique. In this case, there are multiple demos so we use class instead.
Final code (as you scroll each element will turn red showing that the animate class has been added:
$(window).on('scroll', function() {
$('.demo').each(function(i, obj) {
var rect = obj.getBoundingClientRect();
var x = rect.top;
if ($(window).scrollTop() > x - 300) {
$(obj).addClass('animate');
} else {
$(obj).removeClass('animate');
}
});
});
.body {
height: 200vh;
background-color: #f1f1f1;
}
.demo {
height: 200px;
width: 100%;
background-color: #f9f9f9;
}
.demo.animate {
background-color: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body">
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
</div>

There are few notes in regards to your code:
In jQuery you can get elements offset by using .offset() function.
you should not use the same id more than once per page.
.bind() has been deprecated since jQuery 3.0. Use .on() instead.
To toggle class you can use .toggleClass(className, state). State is used to determine if you want to remove or add the class.
See this example:
$(window).on('scroll', function() {
jQuery(".test").each(function() {
let isTop = $(window).scrollTop() > jQuery(this).offset().top - 300;
jQuery(this).toggleClass('animate', isTop);
});
});
.test {
background: #345;
color: #FFF;
height: 2em;
padding: .5em;
top: 50px;
margin-top: 100px;
width: 100%;
}
.animate {
width: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="color: red; margin-bottom: 400px;">(Top!)</div>
<div class="test">Menu</div>
<div class="test">Menu</div>
<div class="test">Menu</div>
<div style="color: red; margin-top: 400px;">(Bottom!)</div>

Remember last hovered Div

I have multiple hoverable divs which change when being hovered... When i get off them with the mouse they return to their normal position. I would like for them to stay hovered unless another div with the same class gets hovered. So one should stay hovered. Sort of like being able to select only one div but with hovering
I tried everything that is in my knowledge
<html>
<head>
<style media="screen">
.hoverable:hover {
background-color: red;
}
.hoverable {
width: 100px;
height: 100px;
background-color: blue;
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="hoverable">
lorem
</div>
<div class="hoverable">
Lorem
</div>
<div class="hoverable">
Lorem
</div>
<div class="hoverable">
Lorem
</div>
</body>
</html>

hope you are looking for something like this
$("div.hoverable").hover(function() {
$("div.hoverable").removeClass("hovered");
$(this).addClass("hovered");
})
div.hoverable {
height: 30px;
width: 300px;
background-color: #ccc;
border: 1px solid #666;
margin: 5px;
}
div.hovered {
color: red;
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hoverable">
1
</div>
<div class="hoverable">
2
</div>
<div class="hoverable">
3
</div>
<div class="hoverable">
4
</div>

There are a few ways you could accomplish this. The easiest that comes to mind is to not use the browser hover style but apply a class dynamically only on mouseenter:
let lastHovered = null;
const onHover = (event) => {
if (lastHovered != null) {
lastHovered.classList.remove('hovered');
}
event.target.classList.add('hovered');
lastHovered = event.target;
}
for (const div of document.getElementsByClassName('hoverable')) {
div.onmouseenter = onHover;
}
Here's an example: https://codepen.io/minism/pen/PooRKqx

I wouldn't use the :hover pseudo-class. Instead, define a class and toggle it with the mouseover event.
var elArray = document.querySelectorAll('.hoverme');
elArray.forEach(function(el) {
el.addEventListener('mouseover', function() {
elArray.forEach(function(el) {
el.classList.remove('hovered');
});
this.classList.add('hovered');
});
});
Working example: https://codepen.io/peiche/pen/wvvmqGZ

Fill parent div with the image being hovered over

I am still fairly new to JS, and I am trying to replace the HTML of a div with a picture that is being moused over, and when the mouse leaves I want it to return to it's normal state. I thought that I did everything right but my code doesn't seem to be working. I've looked through stack overflow and I see a lot of jQuery solutions to my 'problem,' but I would like an answer in pure JavaScript (I'm trying to "maser" this first), along with an explanation so I can understand why the answer IS the answer. Thanks.
I'll try to explain myself (my code). I grabbed reference to the image holder, and I grabbed reference to the the images. I thought I made a function that looped through the array of images and added an event listener to whichever image ( image[i] ) was being moused over. Then, I added an event listener that is supposed to return the image holder to it's default state by inserting the original HTML. I just don't understand how to fix this.
var holder = document.getElementById('holder');
var images = document.getElementsByTagName('img');
var popImage = function () {
for (i = 0; i < images.length; i++) {
images[i].addEventListener('mouseover', = function () {
holder.innerHTML = images[i];
});
images[i].addEventListener('mouseout', function () {
holder.innerHTML =
'<div class='col-md-3 img-fluid' id='img1'><img src='photo1.jpg'></div>
<div class='col-md-3 img-fluid' id='img2'><img src='photo2.jpg'></div>
<div class='col-md-3 img-fluid' id='img3'><img src='photo3.2.jpg'></div>
<div class='col-md-3 img-fluid' id='img4'><img src='photo4.jpg'></div>'
});
};
};
popImage();

You said you are new to JS and just learning which is great but an important part of learning JS is learning when not to use it. As #Yoda said if this was for production you really should use CSS instead of JS.
Here is one way you could accomplish this with pure CSS
<style>
.img {
width: 100px;
height: 100px;
background: #bada55;
border: 2px solid #333;
float: left;
}
.holder:hover > .img {
opacity: 0;
}
.holder:hover > .img:hover {
opacity: 1;
}
</style>
<div class="holder">
<!-- Using div.img for simplicity, these whould be your <img/> tags -->
<div class="img">1</div>
<div class="img">2</div>
<div class="img">3</div>
<div class="img">4</div>
</div>
For the purpose of learning, here's how you'd do it in JS:
var holder = document.getElementById('holder');
var images = document.querySelectorAll('.img');
var filter = false;
function popImage () {
// Use for (var i = 0 . . .
// Instead of for (i = 0 . . .
// Because without var, i will be stored in the global scope
for (var i = 0; i < images.length; i++) {
(function (_i) {
images[_i].addEventListener('mouseover', function () {
holder.innerHTML = '';
// We can't set innerHTML to images[_i]
// because it's a DomNode not a string
holder.appendChild(images[_i]);
});
})(i);
}
holder.addEventListener('mouseout', function (e) {
if (e.target !== holder)
return;
holder.innerHTML = '';
// Again, use var j = 0 . . .
for (var j = 0; j < images.length; j++) {
holder.appendChild(images[j]);
}
});
}
popImage();
.img {
width: 100px;
height: 100px;
background: #bada55;
border: 2px solid #333;
display: inline-block;
}
#holder {
position: relative;
width: 100%;// So doesn't collape and trigger mouseout
height: 100px;
background: red;
padding: 20px 0;
}
<div id="holder">
<!-- Again, these would be your image tags -->
<div class="img">1</div>
<div class="img">2</div>
<div class="img">3</div>
<div class="img">4</div>
</div>

I had 10 mins before leaving work so I had a crack at this to see how I would do it and give you some ideas.
Here is my implementation (https://jsfiddle.net/hg7s1pyh/)
I guess the main thing here is that I've broken it down into lots of smaller parts, this makes solving problems far easier, each method is concerned with doing one thing only.
You will also note the use of classes to show and hide content rather than removing it entirely, this takes lots of the arduous work out of this feature.
function attachEvents() {
var images = getImages();
images.forEach(function(image) {
attachMouseOverEvent(image);
attachMouseLeaveEvent(image);
});
}
function attachMouseOverEvent(element) {
element.addEventListener('mouseover', function(e) {
var clonedImage = e.target.cloneNode();
addImageToPreview(clonedImage);
});
}
function attachMouseLeaveEvent(element) {
element.addEventListener('mouseleave', function(e) {
removeImageFromPreview();
});
}
function getImages() {
return document.querySelectorAll('.js-image');
}
function getImagePreviewElement() {
return document.querySelector('.js-image-box');
}
function addImageToPreview(imageElement) {
var previewElement = getImagePreviewElement();
previewElement.classList.add('previewing');
previewElement.appendChild(imageElement);
}
function removeImageFromPreview() {
var previewElement = getImagePreviewElement();
previewElement.classList.remove('previewing');
var image = previewElement.querySelector('.js-image');
image.remove();
}
attachEvents();
.image-box {
position: relative;
min-height: 400px;
width: 400px;
border: 1px solid #000;
text-align: center;
}
.image-box .placeholder {
position: absolute;
top: 50%;
text-align: center;
transform: translateY(-50%);
width: 100%;
}
.image-box.previewing .placeholder {
display: none;
}
.image-box .image {
position: absolute;
top: 50%;
text-align: center;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}
.images {
margin-top: 10px;
}
<div class="js-image-box image-box">
<div class="placeholder">
Placeholder
</div>
</div>
<div class="images">
<div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/350x150"></div>
<div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/150x150"></div>
<div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/400x400"></div>
<div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/350x150"></div>
</div>

is there a way to reference a child node and get say an inherited background color?

I was doing some initial testing in jsFiddle as follows: https://jsfiddle.net/6pqxfy2o/
$(function(){
console.log("fired");
$("div").each(function(){
console.log($(this).attr("class"));
console.log($(this).css("background-color"))})
})
.color{
background-color:teal;
}
.dim{
width: 200px;
height: 200px;
}
.sub-dim{
width: 50px;
height:50px;
border: solid 1px white;
}
.ping {
background-color: cyan;
}
.ack {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dim color">
<div class="sub-dim ack">
</div>
<div class="sub-dim ping">
</div>
<div class="sub-dim">
</div>
</div>
This was showing that when running, it did not actually pass the inherited color into the child.
I am curious though how I can get the background color of the sub-dim which has no background color, such as: current background-color or nearest.
My end goal would be to say: When iterating over sub-dim to return [red, cyan,teal] or color codes. Based on the item I gave you, the div is transparent and the parent's color is showing through.

If the color is transparent, you can just set it to inherit and get the new computed color.
// Some browsers say "transparent" and some "rgba(0, 0, 0, 0)"
var transparent = (function() {
var backup = document.body.style.backgroundColor;
document.body.style.backgroundColor = 'transparent';
var bg = getComputedStyle(document.body).backgroundColor;
document.body.style.backgroundColor = backup;
return bg;
})();
[].forEach.call(document.getElementsByTagName("div"), function(el) {
var bg = getComputedStyle(el).backgroundColor;
if (bg === transparent) {
var backup = el.style.backgroundColor;
el.style.backgroundColor = 'inherit';
bg = getComputedStyle(el).backgroundColor;
el.style.backgroundColor = backup;
}
console.log(el.className, ":", bg);
});
.color {
background-color: teal;
}
.dim {
width: 200px;
height: 200px;
}
.sub-dim {
width: 50px;
height: 50px;
border: solid 1px white;
}
.ping {
background-color: cyan;
}
.ack {
background-color: red;
}
<div class="dim color">
<div class="sub-dim ack"></div>
<div class="sub-dim ping"></div>
<div class="sub-dim"></div>
</div>

I'm not sure I completely understand the problem, but you could try
.sub-dim.ack {
background-color: red;
}
or
.ack, .ack * {
background-color: red;
}
Obviosly try to be ore specific with which child elements you'd like to target.
This would likely be a lot easier in SASS.