Develop Reference

Switch DIV content using only Javascript

Why is it not working after I added this code below? As you can see on snippet. Container #1 is not working when click. I've added title and content on it but it is not showing.
Is there anything that I can use instead of getElementsByTagName?
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i = 0; i < sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container' + idInfo).style.display = 'block';
}
#container1,
#container2,
#container3,
#container4 {
display: none;
border: 3px solid blue;
height: 200px;
overflow: hidden;
}
<div id="linkDiv">
Home
link 1
link 2
link 3
link 4
</div>
<div id="container">
The container I want all content divs to load into... and by default, to show the first container content
</div>
<div id="divLinks">
<div id="container1">Container #1
<div>Title</div>
<div>Content:</div>
<p>Whole bunch of text 1</p>
</div>
<div id="container2">
Container #2
<p>Whole bunch of text 2</p>
</div>
<div id="container3">
Container #3
<p>Whole bunch of text 3</p>
</div>
<div id="container4">
Container #4
<p>Whole bunch of text 4</p>
</div>
</div>

You can use querySelectorAll to target the direct children of divLinks only.
function showDiv(idInfo) {
const sel = document.querySelectorAll('#divLinks > div');
sel.forEach(item => {
item.style.display = item.id === `container${idInfo}` ? 'block' : 'none';
});
}
#container1,
#container2,
#container3,
#container4 {
display: none;
border: 3px solid blue;
height: 200px;
overflow: hidden;
}
<div id="linkDiv">
Home
link 1
link 2
link 3
link 4
</div>
<div id="container">
The container I want all content divs to load into... and by default, to show the first container content
</div>
<div id="divLinks">
<div id="container1">Container #1
<div>Title</div>
<div>Content:</div>
<p>Whole bunch of text 1</p>
</div>
<div id="container2">
Container #2
<p>Whole bunch of text 2</p>
</div>
<div id="container3">
Container #3
<p>Whole bunch of text 3</p>
</div>
<div id="container4">
Container #4
<p>Whole bunch of text 4</p>
</div>
</div>

You just only need to get Parent children not nested child.
Just modify
var sel = document.getElementById('divLinks').getElementsByTagName('div');
with
sel = document.querySelector('#divLinks').children;

How do I toggle the background colors within a list of divs?

From a list of items, each in separate divs, the user can select and click only one. The background color should change on the selected one. If the user changes their mind, they can select another one, and the background color should change to the selected color and all the other divs on the list should change back to the default background color.
It's basically the same logic as a radio button on a form. Only one can be selected at a time.
How do I achieve this?
I have attempted to use the element.classList.toggle property. But it only handles each individually. Are there a javascript command(s) to handle this?
<style>
.teamSelected{
background-color: red;
border-radius: 4px;
}
</style>
<div onclick="toggleBackground(team1)">
<div id="team1">
</div>
</div>
<div onclick="toggleBackground(team2)">
<div id="team2">
</div>
</div>
<div onclick="toggleBackground(team3)">
<div id="team3">
</div>
</div>
<script>
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
element.classList.toggle("teamSelected");
}
}
</script>
Thanks!

You are passing variables to the function, which don't exist. You need to put them in quotes, because the function is expecting strings.
const allDivs = document.querySelectorAll('.div');
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
allDivs.forEach(function(el){
el.classList.remove('teamSelected');
});
element.classList.add("teamSelected");
}
}
.toggle > div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
.teamSelected {
background-color: red;
border-radius: 4px;
}
<div onclick="toggleBackground('team1')" class="toggle">
<div id="team1" class="div">
</div>
</div>
<div onclick="toggleBackground('team2')" class="toggle">
<div id="team2" class="div">
</div>
</div>
<div onclick="toggleBackground('team3')" class="toggle">
<div id="team3" class="div">
</div>
</div>

seems like this is something you want?
let x = ('.something');
$(x).on('click', function(){
$(x).css('background','blue');
$(this).css('background', 'green');
});
.something{
width: 100px;
height: 100px;
background: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="something">
<div id="team1">
</div>
</div>
<div class="something">
<div id="team2">
</div>
</div>
<div class="something">
<div id="team3">
</div>
</div>

hover over one element, transition another element

I have two divs A and B. div A is an image. Div B is a paragraph underneath div A.
I am trying to make it so that if I put the mouse over div A, the background and font colour of div B transition to different colours without affecting div A.
I currently have the :hover selector so div B changes if someone hovers over it. But I don't know how to affect div B while hovering over div A.
Any clues on how to achieve this?
EDIT:
Please see below for the structure of my code. I'm trying to make it so that if I hover over #image1, the background of #info1 and the font colour of its paragraph would change and so on so forth for the other two images.
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
<p class="washed-out"> 1 </p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image2" src="res/images/aimage2.png" class="img-responsive center-block">
</div>
<div id="info2" class="col-md-12 col-sm-6">
<p class="washed-out"> 2 </p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<img id="image3" src="res/images/animage3.png" class="img-responsive center-block">
</div>
<div id="info3" class="col-md-12 col-sm-6">
<p class="washed-out"> 3 </p>
</div>
</div>
</div>
</div>
css:
.washed-out{
background: white;
color: black;
transition: background-color 300ms linear, color 1s linear;
}
.washed-out:hover{
background: black;
color: white;
}

You use the sibling selector ~ or the immediate sibling selector +
img:hover + div {
color: red;
}
<img src="http://placehold.it/100">
<div>Hey there...I get red when you hover the image</div>
Update based on comment, possible CSS version
.hoverme:hover + div .washed-out {
color: red;
background: black;
}
<div class="col-md-12 col-sm-6 hoverme">
<img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
<p class="washed-out">1</p>
</div>
Update based on comment, possible JS version
window.addEventListener('load', function() {
var imglist = document.querySelectorAll('img.img-responsive');
for (var i = 0; i < imglist.length; i++) {
imglist[i].addEventListener('mouseover', function(e) { e.target.parentElement.nextElementSibling.classList.add('infos');
})
imglist[i].addEventListener('mouseout', function(e) { e.target.parentElement.nextElementSibling.classList.remove('infos');
})
}
})
div.infos .washed-out {
color: red;
background: black;
}
<div class="col-md-12 col-sm-6">
<img id="image1" src="res/images/aimage1.png" class="img-responsive center-block">
</div>
<div id="info1" class="col-md-12 col-sm-6">
<p class="washed-out">1</p>
</div>

You're looking for the adjacent sibling selector - element:hover + element:
.container {
width: 100px;
height: 100px;
background: red;
transition: all 0.5s;
}
.container:first-child {
margin-bottom: 10px;
}
/** if the 1st element is hovered, changed the 2nd **/
.container:hover + .container {
background: blue;
color: white;
}
<div class="container">Div 1</div>
<div class="container">Div 2</div>

What you want can be done by javascript event handler.
Something like this:
var d1 = document.getElementById("div1"); // on hover on this div
var d2 = document.getElementById("div2"); // bring changes to this
d1.addEventListener("hover", callfun, false);
function callfun(){
d2.style.backgroundColor = 'blue';
}
Good luck

Basically you need to register a hovering in and out handler as shown in the following answer:
Event listener hover changing other element
Here is a slightly modified version of it to fit more closely to your need.
document.getElementById("Div-A").addEventListener("mouseenter",function (){
document.getElementById("Div-B").style.backgroundColor = "red";
document.getElementById("Div-B").style.backgroundColor = "Yellow";
});
document.getElementById("Div-A").addEventListener("mouseout",function (){
document.getElementById("Div-B").style.backgroundColor = "";
document.getElementById("Div-B").style.text = "";
});

Use successor siblings ~ or immediate successor siblings + to make any change on hover
img:hover ~ div {
color: red;
}
<img src="http://placehold.it/100">
<div>Hey there...I get red when you hover the image</div>
<div>Hey there...I also get red when you hover the image</div>

<script>
function Myfunc1(){
document.getElementById("div1").style.backgroundColor = "green"
document.getElementById("div2").style.backgroundColor = "white"}
function Myfunc2(){
document.getElementById("div2").style.backgroundColor = "red"
document.getElementById("div1").style.backgroundColor = "white"}
</script>
<pre><div id="div1" onmouseover="Myfunc1()"><img src=""><p> look</p></div>
<div id="div2" onmouseover="Myfunc2()"><p>here</p></div></pre>

How to disable bottom div when absolute div on top?

I am new to stackoverflow and can't seem to find an answer to my issue - please put link to similar question if I missed it, but I have gave it a strong gander already.
I am making a portfolio site and when a user clicks a project, the clicked div slides out and the bottom div is revealed with the project case study.
The problem: When user scrolls down to project thumbs on sliding div, the lower div scrolls with it - therefore when the user clicks the project, the case study is already scrolled down. I need it to reveal with the case study at scrolltop(0)
Here is a simplified version of what I have so you can get an idea:
// View Project Details (user clicks thumbnail from LP) CTA function
$(".projThumb").click(function()
{
$("#nav-icon3").toggleClass('open');
$(".projDetails").fadeIn( 500 );
// $('.lowerContainer').css('position','absolute');
$('.mainContentWrap').openSlide();
var id = $(this).attr('id');
if(id == 'Proj1')
{
$("#Proj1_Details").fadeIn( 500 );
//get persona image height so background shape is proportional
var personaImgHeight = parseInt($("#personaImg1").height());
$(".containImg").css("height", personaImgHeight + "px");
$(".personaImgWrap").css("height", personaImgHeight + "px");
} else if (id == 'Proj2') {
$("#Proj2_Details").fadeIn( 500 );
//get persona image height so background shape is proportional
var personaImgHeight = parseInt($("#personaImg2").height());
$(".containImg").css("height", personaImgHeight + "px");
$(".personaImgWrap").css("height", personaImgHeight + "px");
} else if (id == 'Proj3') {
$("#Proj3_Details").fadeIn( 500 );
//get persona image height so background shape is proportional
var personaImgHeight = parseInt($("#personaImg3").height());
$(".containImg").css("height", personaImgHeight + "px");
$(".personaImgWrap").css("height", personaImgHeight + "px");
} else if (id == 'Proj4') {
$("#Proj4_Details").fadeIn( 500 );
};
});
.lowerContainer
{
width:80%;
max-width: 2050px;
height: auto;
min-height:100vh;
margin:0 auto;
background:#f9f9f9;
position: relative;
/*left:10%;*/
}
.revealPanel
{
width: 100%;
min-height:100vh;
float: left;
margin-top:0;
overflow-y:scroll;
padding:0;
/*position: fixed;*/
}
.mainContent
{
width:80%;
max-width: 2050px;
height:auto;
top:0px;
left: 0px;
right: 0;
margin-top: 0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
position: absolute;
z-index: 1000;
overflow-x: hidden;
overflow-y: scroll;
opacity: 1;
}
.mainContentWrap
{
width:100%;
overflow:auto;
}
<div class="lowerContainer group">
<section class="revealPanel group">
<!-- ******************************
PROJECT CASE STUDY GOES HERE
******************************** -->
</section> <!-- /revealPanel -->
</div> <!-- /lowerContainer -->
<div class="mainContent">
<div class="mainContentWrap">
<!-- ******************************
MY WORK SECTION
******************************** -->
<div class="myWork group">
<!-- Project container (Contains project thumbnails ) -->
<div class="projContainer">
<h3 class="secTitle">Recent Work</h3>
<div class="projectsWrap">
<div class="row">
<!-- Project 1 -->
<div class="projects col-lg-6 col-md-12">
<div class="projThumb" id="Proj1">
<img src="assets/proj1.png" width="100%" alt="">
</div>
</div>
<!-- Project 2 -->
<div class="projects col-lg-6 col-md-12">
<div class="projThumb" id="Proj2">
<img src="assets/proj2.png" width="100%" alt="">
</div>
</div>
<!-- Project 3 -->
<div class="projects col-lg-6 col-md-12">
<div class="projThumb" id="Proj3">
<img src="assets/proj3.png" width="100%" alt="">
</div>
</div>
<!-- Project 4 -->
<div class="projects col-lg-6 col-md-12">
<div class="projThumb" id="Proj4">
<img src="assets/proj4.png" width="100%" alt="">
</div>
</div>
</div> <!-- /row -->
</div> <!-- /projectWrap -->
</div> <!-- projectsWrap -->
<!-- <div class="triBg" id="triBg-myWork"></div> -->
</div> <!-- /myWork -->
</div>
</div> <!-- /mainContent -->

Based on what you said you want to happen, without really looking at your massive amount of code, I think you are over complicating this.
You can make use of jQuery's .slideToggle() http://api.jquery.com/slidetoggle/
You can also utilize the fact that you can have multiple elements with the same class to help minimize the amount of repeated code.
$(document).on('click', '.projectButton', function(){
$(this).siblings('.projectInfo').slideToggle();
});
.projectInfo {
display: none;
}
.projectButton {
height: 25px;
background: gray;
cursor: pointer;
border: 1px solid white;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="projectsContainer">
<div class="project" id="project1">
<div class="projectButton">Project 1</div>
<div class="projectInfo">Project 1 information goes here</div>
</div>
<div class="project" id="project2">
<div class="projectButton">Project 2</div>
<div class="projectInfo">Project 2 information goes here</div>
</div>
<div class="project" id="project3">
<div class="projectButton">Project 3</div>
<div class="projectInfo">Project 3 information goes here</div>
</div>
<div class="project" id="project4">
<div class="projectButton">Project 4</div>
<div class="projectInfo">Project 4 information goes here</div>
</div>
</div>

How to make multiple divs slidetoggle with changing arrow

I'm very new to javascript and jQuery and has now got completely stuck despite trying various options. I'm trying to create a expand/collapse section with multiple divs. I would like each div to open and close seperately, with an arrow at the side pointing up or down, depending whether the content is expanded or collapsed.
From the code I have written below, only the first div works correctly. The only thing which happen When you click on the two other divs, is that the arrow in the first div change.
Any help will be greatly appreciated.
Following is the CSS:
#header_background {
background-image: url(header-background.png);
width:748px;
height:43px;
margin-left: -17px;}
#expand_arrow {
display: inline-block;
width: 17px;
height: 18px;
float:left;
margin-left:20px;
padding-left:0px;
padding-top:11px;
background-repeat:no-repeat; }
.sub_header {
color:#204187;
font-weight:bold;
font-size:16px;
vertical-align:middle;
padding-left:4px;
padding-top:12px;
float:left;
text-decoration:none;
}
Here's the attempted javascript and jQuery:
function chngimg() {
var img = document.getElementById('expand_arrow').src;
if (img.indexOf('expand-arrow.png')!=-1) {
document.getElementById('expand_arrow').src = 'images/collapse-arrow.png';
}
else {
document.getElementById('expand_arrow').src = 'images/expand-arrow.png';
}
}
$(document).ready(function(){
$("#header_background").click(function(){
$("#section").slideToggle("slow");
});
});
And here's the HTML
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 1</div>
</div>
<div id="section" style="display:none">
text 1
</div>
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 2</div>
</div>
<div id="section" style="display:none">
text 2
</div>
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 3</div>
</div>
<div id="section" style="display:none">
text 3
</div>

It's only working for the first set of elements because you're using IDs, and IDs have to be unique within the document (page). You could change to using classes and perform some simple DOM traversal to get the corresponding section based on the header that was clicked. Something like this:
$(document).ready(function() {
$('.header_background').click(function(e) {
$(this).next('.section').slideToggle('slow');
var img = $(this).find('img.expand_arrow')[0]; // the actual DOM element for the image
if (img.src.indexOf('expand-arrow.png') != -1) {
img.src = 'images/collapse-arrow.png';
}
else {
img.src = 'images/expand-arrow.png';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 1</div>
</div>
<div class="section" style="display:none">
text 1
</div>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 2</div>
</div>
<div class="section" style="display:none">
text 2
</div>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 3</div>
</div>
<div class="section" style="display:none">
text 3
</div>

Look for your next section of the header clicked like so. And change your id for class because ID need to be unique
$(".header_background").click(function(){
$(this).nextAll(".section:first").slideToggle("slow");
});