We Keep Coding

Click open menu click out of the div to close

I have a menu and I want it to open when I click this text from a drop down menu and I want it to close when the mouse clicks anywhere else.
var ignoreClickOnMeElement = document.getElementById('status_menu');
document.addEventListener('click', function(event) {
var isClickInsideElement = ignoreClickOnMeElement.contains(event.target);
if (!isClickInsideElement) {
status_menu.classList.remove("status-menu");
status_menu.classList.add("nostatus-menu");
}
});
.avatar {
height: 7vh;
width: 7vh;
background: url('../images/blankprofilepicture.png');
background-size: cover;
border-radius: 100%;
}
.avatar img {
width: 7vh;
border-radius: 100%;
}
.dropdown {
z-index: 1;
height: 7vh;
width: 7vh;
float: right;
margin-top: 1vh;
margin-right: 3vw;
position: relative;
}
.avatar-dropdown {
display: none;
position: absolute;
padding-top: 0.5%;
}
.avatar-dropdown p {
cursor: pointer;
padding: 0.5vw 1vw;
font-family: "Ubuntu", sans-serif;
color: black;
text-decoration: none;
display: block;
font-size: 1em;
text-align: center;
background-color: white;
margin: 0;
}
.avatar-dropdown p:hover {
background-color: #b5b5b5;
}
.dropdown:hover .avatar-dropdown {
display: block;
}
<header id="header">
<h1>DEVIE</h1>
<div class="dropdown" id="dropdown">
<div class="avatar"></div>
<div class="online-offline"></div>
<div id="status_menu">
<div id="online-div">
</div>
<div id="offline-div">
</div>
</div>
<div class="avatar-dropdown" id="avatar-dropdown">
<p onclick="status_menu();">Change status</p>
<p onclick="window.location.href='profile.php';">Profile</p>
<p onclick="window.location.href='friends.php';">Friends</p>
<p onclick="logout();">Logout</p>
</div>
</div>
</header>
But couldn't make it work and make it remove the Event listener once the div is closed.
Please help, thanks!

Remove double-click on dropdown link

I'm not very knowledgeable in javascript. But I need a dropdown on a vertical menu that is pure javascript, so I copied/paste the script from W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown
and modified it to fit the page style. This menu needs to be on multiple pages, so it's also an html include. I got it to somewhat work, but you have to double click the drop-drop down in order to close it and this needs to be a single-click. I've been searching for a solution for a couple weeks now and still not sure what I'm doing wrong. I can't use jquery, bootstrap or any outside library since it's not connected to the internet.
HTML:
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div onclick="myButton()">Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
Codepen

The problem is that on your .drop-button element, you have an inline onClick() attribute/event, AND inside the handler function (function myButton()) you you declare another eventListener on top of that.
You should just remove the onclick="myButton()" attribute all together, and then your JavaScript would look like this:
(Run code snippet)
There are a few different ways in JavaScript to declare event listeners. One way is Inline/HTML Event Handlers that you put inline on the HTML element like an attribute, ie- <div onClick="handlerFunction"> But the more modern, and more recommended way is using addEventListener() directly from your JavaScript.
var dropdown = document.querySelector(".drop-button");
dropdown.addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display == "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display= "block";
}
});
#content {
margin: 1.875em 0px 0.625em 0px;
width: auto;
background-color: #002f6c;
border-radius: 0.75em;
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
display: inline-block;
overflow: hidden;
top: 9.375em;
}
.quick {
margin: 0;
padding: 0;
display: block;
overflow: hidden;
font-family: sans-serif;
}
.quick a {
display: block;
height: auto;
padding-top: 0.625em;
padding-bottom: 0.625em;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
text-align: center;
text-decoration: none;
background-color: #888B8D;
}
.quick a:hover {
display: block;
width: auto;
height: auto;
color: #002F6C;
background-color: #FFD300;
}
.topvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmverthome {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.vertheader {
width: auto;
padding: 2%;
display: block;
text-align: center;
}
.vertbtn {
width: auto;
cursor: pointer;
display: block;
}
.vertbtn :hover {
background-color: #FFD300;
position: relative;
display: block;
}
a.backhome {
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
color: #fff;
text-align: center;
padding: 2%;
box-sizing: border-box;
}
a.backhome:hover {
color: #002f6c;
background-color: #FFD300;
position: relative;
display: block;
}
.quicklinks {
color: #fff;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
}
.drop-button {
padding-top: 0.625em;
padding-bottom: 0.625em;
text-decoration: none;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
color: #fff;
display: block;
border: none;
background-color: #888B8D;
width: 100%;
text-align: center;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.drop-button:hover {
color: #002f6c;
background-color: #FFD300;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
}
.active {
background-color: #06a7e0;
color: white;
}
.dropdown-container {
display: none;
background-color: #b4e4f5;
border-bottom: solid 2px #06a7e0;
}
.dropdown-container > a {
background-color: #50c1e9;
border-bottom: solid 1px #06a7e0;
}
a {
display: block;
position: relative;
color: #f3f3f3;
text-decoration: none;
}
a:hover {
color: #fff;
position: relative;
}
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div>Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>

Unable to append to a find element

I am running a check to see if the data-attribute, availability is Yes or No. If it is no, I am finding that specific .smallCatalogBlock and wanting to append the .soonOverlay on top of it.
As on now, the element is not being appended to .smallCatalogBlock. I have a console.log check in place to see if the condition is running successfully, and it is, with the correct number of found elements. The html just isn't being appended.
Does anyone see what I am doing wrong?
$('.smallCatalogBlock').each(function() {
if ($(this).data('availability') === 'No') {
$(this).find('.smallCatalogBlock').append('<div class="soonOverlay"><div class="soonOverlayInner"><div class="total-center"><p class="dGw">Coming Soon</p></div></div></div>');
console.log("It should be working");
}
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogBlock img {
width: 80%;
height: auto;
box-shadow: 10px 5px 5px rgba(0,0,0,.3);
display: block;
margin: 0px auto 15px auto;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.comingSoonSmall {
position: relative;
}
.comingSoonSmall .soonOverlay {
width: 80%;
height: 100%;
background: #b82222;
opacity: .8;
position: absolute;
top: 0;
margin: 0 10%;
}
.soonOverlayInner {
position: relative;
min-height: 350px;
}
.soonOverlayInner .dGw {
font-weight: 600;
text-transform: uppercase;
font-size: 2.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-availability="Yes">
<span class="smallCatalogTitle">A</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<span class="smallCatalogTitle">B</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<span class="smallCatalogTitle">C</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

It's because when you're using $(this), the object itself is the item with class .smallCatalogBlock. So when you run $(this).find('.smallCatalogBlock'), it tries to find an element with class smallCatalogBlock WITHIN the element with class smallCatalogBlock, and fails. Since it can't find, it can't append. It should work if you simply do $(this).append(...).

Change CSS of nth class in Jquery or Javascript

I am trying to change the text color of the 5th infobox (class) in my code below. The text color changes but for all the infoboxes.
//INFOBOX5
var json_data = {"headers":["Platform","Value1","value1","valueP1","valueP2"],"rows":[["platform2","xxx",404.07000000000005,1634,6364],["platform5","xxx",404.07000000000005,1634,6364],["platform1","xxx",352.8,1634,6364],["platform3","xxx",352.8,1634,6364],
["platform3","xxx",352.8,1634,6364],["platform4","xxx",352.8,1634,6364]]};
var platform_data = json_data.rows;
var platform1_element = document.getElementById("platform1");
var platform5_element = document.getElementById("platform5");
var platform6_element = document.getElementById("platform6");
var platform2_element = document.getElementById("platform2");
var platform3_element = document.getElementById("platform3");
var platform4_element = document.getElementById("platform4");
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
function formatNumber (num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}
var platforms = [];
for (var i in platform_data) {
if (platform_data[i][0] != null){
platforms[i] = platform_data[i][0].toLowerCase();
}
}
var unique_platforms = platforms.filter( onlyUnique );
var target_width = 100/(unique_platforms.length-2);
var width_str=target_width+"%";
platform1_element.classList.add("hidden");
platform5_element.classList.add("hidden");
platform6_element.classList.add("hidden");
platform3_element.classList.add("hidden");
platform2_element.classList.add("hidden");
platform4_element.classList.add("hidden");
var total_value1 = 0;
var total_value2 = 0;
var total_display_value1 = 0;
var total_video_value1 = 0;
var total_mixed_value1 = 0;
var total_other_value1 = 0;
var total_display_value2 = 0;
var total_video_value2 = 0;
var total_mixed_value2 = 0;
var value2_numbers = [];
for (var i in unique_platforms) {
var platform_name = unique_platforms[i].toLowerCase();
var display_value1_total = 0;
var display_value2_total = 0;
var video_value1_total = 0;
var video_value2_total = 0;
var mixed_value1_total = 0;
var mixed_value2_total = 0;
var other_value1_total = 0;
for (var x in platform_data){
if (platform_data[x][0] != null){
if(platform_data[x][0].toLowerCase() == platform_name){
switch(platform_data[x][1]) {
case "display":
// Red Dot
display_value1_total = display_value1_total + platform_data[x][2];
total_value1 = total_value1 + display_value1_total;
break;
case "video":
video_value1_total = video_value1_total + platform_data[x][2];
total_value1 = total_value1 + video_value1_total;
break;
case "mixed":
mixed_value1_total = mixed_value1_total + platform_data[x][2];
total_value1 = total_value1 + mixed_value1_total;
break;
case "Other":
other_value1_total = other_value1_total + platform_data[x][2];
total_value1 = total_value1 + other_value1_total;
break;
default:
doNothing = "";
}
}
}else {
value2_numbers = platform_data[x];
}
}
var platform_value1 = display_value1_total + video_value1_total + mixed_value1_total + other_value1_total;
var generic_element = document.getElementById(platform_name);
var element_value1_name = platform_name+"_value1";
var fl_value1 = parseFloat(platform_value1).toFixed(0);
var curr_flag = "€"+formatNumber(fl_value1);
document.getElementById(element_value1_name).innerHTML = curr_flag;
total_display_value1 = total_display_value1 + display_value1_total;
total_video_value1 = total_video_value1 + video_value1_total;
total_mixed_value1 = total_mixed_value1 + mixed_value1_total;
}
var total_value1_string = "<h1>€" + formatNumber(Number(total_value1).toFixed(0)) + "</h1>";
//document.getElementById("total_value1").innerHTML = total_value1_string;
if (value2_numbers.length == 0){
value2_numbers = platform_data[0];
}
var fl_value2 = 0;
var curr_flag_bud = '';
var element_value2_name = '';
for (var i in json_data.headers){
switch(json_data.headers[i]) {
case "valueP1":
element_value2_name = "platform1_value2";
fl_value2 = parseFloat(value2_numbers[i]).toFixed(0);
curr_flag_bud = "€"+formatNumber(fl_value2);
document.getElementById(element_value2_name).innerHTML = curr_flag_bud;
break;
case "valueP2":
element_value2_name = "platform2_value2";
fl_value2 = parseFloat(value2_numbers[i]).toFixed(0);
curr_flag_bud = "€" +formatNumber(fl_value2);
document.getElementById(element_value2_name).innerHTML = curr_flag_bud;
break;
case "valueP1":
element_value2_name = "platform1_value2";
fl_value2 = parseFloat(value2_numbers[i]).toFixed(0);
curr_flag_bud = "€" +formatNumber(fl_value2);
document.getElementById(element_value2_name).innerHTML = curr_flag_bud;
break;
default:
}
}
var statBox = Array.from(document.querySelectorAll('.infobox'));
var element_id;
var parentBoxlist = Array.from(document.querySelectorAll('.parentbox'));
var channel_value1_check = 0;
var value1_channels = [];
// if (total_mixed_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[0] = 'mixed';};
// if (total_video_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[1] = 'video';};
// if (total_display_value1 > 0.0) {channel_value1_check = channel_value1_check + 1;value1_channels[2] = 'display';};
statBox.forEach(function(box) {
switch(unique_platforms.length) {
case 1:
// 1 box
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox1');
box.classList.remove('hidden');
}
break;
case 2:
// 2 box's
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox2');
box.classList.remove('hidden');
}
break;
case 3:
// 3 box's
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox3');
box.classList.remove('hidden');
}
break;
case 4:
// 4 box's
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox4');
box.classList.remove('hidden');
}
break;
case 5:
// 5 box's
element_id = box.getAttribute('id');
if (unique_platforms.includes(element_id)){
box.classList.add('infobox5');
box.classList.remove('hidden');
}
break;
default:
}
});
$(".boxbox:nth-of-type(1)").css("color", "#fff");
#import url('https://fonts.googleapis.com/css?family=Roboto');
body{
color: #fff;
font-family: Roboto;
margin:0;
overflow:hidden;
}
h1{
font-size: 1.2vw;
}
h3{
font-size: 1.1vw!important;
font-weight: 100;
margin: 0;
padding: 5px;
}
.redSq{
background-color: #ff000a;
width: 117px;
height: 241px;
float:left;
}
.row {
display: table;
width: 99.8%;
height: 180px;
color: #454545;
background-color:#dee9f3;
//border: solid 1px #454545;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
margin-bottom: 10px;
}
.row > .col-lg-6 {
display: table-cell;
vertical-align: middle;
}
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
padding: 15px;
margin: 5px;
flex: 0 0 calc(100% - 20px);
text-align: left;
}
td{
padding: 2px 2px;
text-align: center;
margin: 6px 0;
border: none;
}
table{
width: 100%;
background-color:#454545;
font-weight:500;
border-collapse: separate;
border-spacing:0.3em 1.1em;
color: #fff;
border: 0;
}
p{
font-size: 1.2vw;
}
.boxes{
padding-top: 40px;
padding-left: 30px;
padding-right: 5%;
min-width: 200px;
float:left;
display: inline-block;
}
#line{
border-bottom: solid 1px #CCC;
margin-top: 0px;
padding-top: 15px;
}
.infobox {
float:left;
margin: 0;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
color: #454545;
}
.infobox1 {
float:left;
min-height:150px;
min-width: 100%;
margin: 0;
}
.infobox2 {
float:left;
min-height:150px;
min-width: 49%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox3 {
float:left;
min-height:150px;
min-width: 32.33%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox4 {
float:left;
//min-height:150px;
min-width: 23.9%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox5 {
float:left;
min-height:150px;
min-width: 32.33%;
margin: 0 0.5% 0.7%;
//padding: 18px 0;
}
div.leftBox{
float:left;
width:60%;
margin: 15px 0 0 25px;
font-size: 1.1vw;
}
div.rightBox{
float:left;
width: 60%;
margin: 15px 0 0 25px;
font-size: 1.1vw;
}
.infocontentheader {
//text-align: center;
line-height: 2.8;
//color: #fff;
vertical-align: middle;
height: 100%;
float:left;
width:25%;
}
.infocontent{
text-align: center;
color: #fff;
width: 50%;
float: left;
}
div#platform1.infocontentheader{
background-color: #3c5999;
}
div#platform1.infobox img{
display: block;
margin: 0 auto 0 auto;
}
p#sTitle {
font-weight: 900;
font-size: 1.5vw;
}
p#bTitle {
//font-weight: 900;
font-size: 1.2vw;
}
p#platform1_value1, p#platform5_value1, p#platform4_value1 ,p#platform3_value1,
p#platform2_value1, p#twitter_value1 {
font-weight: 900;
font-size: 1.3em;
margin: 10px 0 0 20px;
}
p#platform1_budget, p#platform5_budget, p#platform4_budget, p#platform3_budget,
p#platform2_budget, p#twitter_budget{
font-size: 1.2em;
margin: 10px 0 0 20px;
}
div#twitter.infocontentheader{
background-color: #1da1f2;
}
div#twitter.infobox img{
display: block;
margin: 0 auto 0 auto;
}
div#platform3.infocontentheader{
background-color: #a15aa0;
}
div#display.parentbox{
background-color: #b3b3b3;
color: #fff;
}
div#video.parentbox{
background-color: #999999;
color: #fff;
}
div#mixed.parentbox{
background-color: #c1c1c1;
color: #fff;
}
#platform3 div.infocontentheader{
color: #fff;
}
div#platform3.infobox img{
display: block;
margin: 0 auto 0 auto;
}
div#platform3_value.infocontent{
color: #000;
}
div#platform5.infocontentheader{
background-color: #ff0102;
}
div#platform5.infobox img{
display: block;
margin: 0 auto 0 auto;
}
div#platform4.infocontentheader{
background-color: #cac9c2;
}
div#platform4.infobox img{
display: block;
margin: 10% auto 0 auto;
}
div#platform2.infobox{
background-color: #fff;
}
div#platform2.infobox img{
display: block;
margin: 10% auto 0 auto;
}
.hidden{
display:none;
}
#parent_div_1{
width:50%;
min-height: 150px;
background-color: #757476;
margin-right:0px;
float:left;
}
#parent_div_2{
width:50%;
min-height: 150px;
background-color: #8D8D8D;
margin-right:0px;
float:left;
}
.parentbox{
width:33.33%;
min-height: 150px;
/*background-color: #8D8D8D;*/
margin-right:0px;
float:left;
}
.parentbox1{
width:100%;
min-height: 150px;
margin-right:0px;
float:left;
}
.parentbox2{
width:50%;
min-height: 150px;
margin-right:0px;
float:left;
}
.parentbox3{
width:33.33%;
min-height: 150px;
margin-right:0px;
float:left;
}
.child_div_1{
margin-top: 50px;
margin-left: 15%;
margin-bottom: 0px;
text-align: left;
}
.child_div_2{
margin-left: 15%;
margin-top: 10px;
margin-bottom: 40px;
text-align: left;
}
.child_budget{
margin-top: 10px;
margin-bottom: 40px;
padding-left:15%;
text-align: left;
float: left;
}
.child_value1{
margin-top: 10px;
margin-bottom: 40px;
padding-right: 15%;
text-align: left;
float:right;
}
.child_title{
margin-top: 50px;
margin-bottom: 0px;
text-align: center;
}
.child_budget_number{
padding-right: 20%;
}
.child_value1_number{
padding-left: 20%;
}
.boxbox {
display: table;
width: 99.8%;
height: 160px;
color: #454545;
font-size:1.1vw;
}
.boxbox {
float:left;
display: table;
width: 99.8%;
height: 180px;
color: #454545;
}
.boxbox > .col-lg-6 {
display: table-cell;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="wrapper2" style="height:160px;">
<div class="infobox" id="platform1">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform1_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform1_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform6">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform6_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform6_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform3">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #a15aa0; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform3_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform3_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform5">
<div class="boxbox" id="platform5">
<div class="col-lg-6" style="background-color: #ff0102; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform5_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform5_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform4">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #cac9c2; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform4_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform4_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox" id="platform2">
<div class="boxbox" id="platform2">
<div class="col-lg-6" style="background-color: #8a3ab9; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform2_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform2_value2"></div>
</div>
</div>
</div>
</div>
</div>
</div>

Your direct child of class container infobox5 is overwriting the CSS color for your Jquery method. You have to remove it first and then use it as demonstrated below:
Note- .eq(index) is better suited for your query in contrast to :nth-of-type(index). You can try them both and see it for yourself.
Pointer:
Clean up your CSS, a lot of unecessary styles have been implemented but for this query, as mentioned by the other answer as well .boxbox class is implementing its own color style and as mentioned the child of div with class infobox5 is also implementing its own color style which overrides the JQuery css being implemented on the parent container.
$(".infobox5").eq(4).css("color", "green"); //Index starts from 0 for 1st element, 1 for 2nd and so on 4 for 5th element of type .infobox5
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {
color: #fff;
font-family: Roboto;
margin: 0;
overflow: hidden;
}
h1 {
font-size: 1.2vw;
}
h3 {
font-size: 1.1vw!important;
font-weight: 100;
margin: 0;
padding: 5px;
}
.redSq {
background-color: #ff000a;
width: 117px;
height: 241px;
float: left;
}
.row {
display: table;
width: 99.8%;
height: 180px;
color: #454545;
background-color: #dee9f3;
//border: solid 1px #454545;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
margin-bottom: 10px;
}
.row>.col-lg-6 {
display: table-cell;
vertical-align: middle;
}
.container {
display: flex;
flex-wrap: wrap;
}
.container>div {
padding: 15px;
margin: 5px;
flex: 0 0 calc(100% - 20px);
text-align: left;
}
td {
padding: 2px 2px;
text-align: center;
margin: 6px 0;
border: none;
}
table {
width: 100%;
background-color: #454545;
font-weight: 500;
border-collapse: separate;
border-spacing: 0.3em 1.1em;
color: #fff;
border: 0;
}
p {
font-size: 1.2vw;
}
.boxes {
padding-top: 40px;
padding-left: 30px;
padding-right: 5%;
min-width: 200px;
float: left;
display: inline-block;
}
#line {
border-bottom: solid 1px #CCC;
margin-top: 0px;
padding-top: 15px;
}
.infobox {
float: left;
margin: 0;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
color: #454545;
}
.infobox1 {
float: left;
min-height: 150px;
min-width: 100%;
margin: 0;
}
.infobox2 {
float: left;
min-height: 150px;
min-width: 49%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox3 {
float: left;
min-height: 150px;
min-width: 32.33%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox4 {
float: left;
//min-height:150px;
min-width: 23.9%;
margin: 0 0.5%;
//padding: 18px 0;
}
.infobox5 {
float: left;
min-height: 150px;
min-width: 32.33%;
margin: 0 0.5% 0.7%;
//padding: 18px 0;
}
div.leftBox {
float: left;
width: 60%;
margin: 15px 0 0 25px;
font-size: 1.1vw;
}
div.rightBox {
float: left;
width: 60%;
margin: 15px 0 0 25px;
font-size: 1.1vw;
}
.infocontentheader {
//text-align: center;
line-height: 2.8;
//color: #fff;
vertical-align: middle;
height: 100%;
float: left;
width: 25%;
}
.infocontent {
text-align: center;
color: #fff;
width: 50%;
float: left;
}
div#facebook.infocontentheader {
background-color: #3c5999;
}
div#facebook.infobox img {
display: block;
margin: 0 auto 0 auto;
}
p#sTitle {
font-weight: 900;
font-size: 1.5vw;
}
p#bTitle {
//font-weight: 900;
font-size: 1.2vw;
}
p#facebook_spend,
p#youtube_spend,
p#search_spend,
p#programmatic_spend,
p#instagram_spend,
p#twitter_spend {
font-weight: 900;
font-size: 1.3em;
margin: 10px 0 0 20px;
}
p#facebook_budget,
p#youtube_budget,
p#search_budget,
p#programmatic_budget,
p#instagram_budget,
p#twitter_budget {
font-size: 1.2em;
margin: 10px 0 0 20px;
}
div#twitter.infocontentheader {
background-color: #1da1f2;
}
div#twitter.infobox img {
display: block;
margin: 0 auto 0 auto;
}
div#programmatic.infocontentheader {
background-color: #a15aa0;
}
div#display.parentbox {
background-color: #b3b3b3;
color: #fff;
}
div#video.parentbox {
background-color: #999999;
color: #fff;
}
div#mixed.parentbox {
background-color: #c1c1c1;
color: #fff;
}
#programmatic div.infocontentheader {
color: #fff;
}
div#programmatic.infobox img {
display: block;
margin: 0 auto 0 auto;
}
div#programmatic_value.infocontent {
color: #000;
}
div#youtube.infocontentheader {
background-color: #ff0102;
}
div#youtube.infobox img {
display: block;
margin: 0 auto 0 auto;
}
div#search.infocontentheader {
background-color: #cac9c2;
}
div#search.infobox img {
display: block;
margin: 10% auto 0 auto;
}
div#instagram.infobox {
background-color: #fff;
}
div#instagram.infobox img {
display: block;
margin: 10% auto 0 auto;
}
.hidden {
display: none;
}
#parent_div_1 {
width: 50%;
min-height: 150px;
background-color: #757476;
margin-right: 0px;
float: left;
}
#parent_div_2 {
width: 50%;
min-height: 150px;
background-color: #8D8D8D;
margin-right: 0px;
float: left;
}
.parentbox {
width: 33.33%;
min-height: 150px;
/*background-color: #8D8D8D;*/
margin-right: 0px;
float: left;
}
.parentbox1 {
width: 100%;
min-height: 150px;
margin-right: 0px;
float: left;
}
.parentbox2 {
width: 50%;
min-height: 150px;
margin-right: 0px;
float: left;
}
.parentbox3 {
width: 33.33%;
min-height: 150px;
margin-right: 0px;
float: left;
}
.child_div_1 {
margin-top: 50px;
margin-left: 15%;
margin-bottom: 0px;
text-align: left;
}
.child_div_2 {
margin-left: 15%;
margin-top: 10px;
margin-bottom: 40px;
text-align: left;
}
.child_budget {
margin-top: 10px;
margin-bottom: 40px;
padding-left: 15%;
text-align: left;
float: left;
}
.child_spend {
margin-top: 10px;
margin-bottom: 40px;
padding-right: 15%;
text-align: left;
float: right;
}
.child_title {
margin-top: 50px;
margin-bottom: 0px;
text-align: center;
}
.child_budget_number {
padding-right: 20%;
}
.child_spend_number {
padding-left: 20%;
}
.boxbox {
display: table;
width: 99.8%;
height: 160px;
font-size: 1.1vw;
}
.boxbox {
float: left;
display: table;
width: 99.8%;
height: 180px;
}
.boxbox>.col-lg-6 {
display: table-cell;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="wrapper2" style="height:160px;">
<div class="infobox infobox5" id="platform1">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform1_value1">353</div>
</div>
<div id="bTitle">value2<br>
<div id="platform1_value2">1,634</div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox hidden" id="platform6">
<div class="boxbox" style="color: rgb(255, 255, 255);">
<div class="col-lg-6" style="background-color: #3c5999; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform6_value1"></div>
</div>
<div id="bTitle">value2<br>
<div id="platform6_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox infobox5" id="platform5">
<div class="boxbox" >
<div class="col-lg-6" style="background-color: #a15aa0; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform5_value1">706</div>
</div>
<div id="bTitle">value2<br>
<div id="platform5_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox infobox5" id="platform3">
<div class="boxbox" id="platform3" >
<div class="col-lg-6" style="background-color: #ff0102; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform3_value1">404</div>
</div>
<div id="bTitle">value2<br>
<div id="platform3_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox infobox5" id="platform4">
<div class="boxbox">
<div class="col-lg-6" style="background-color: #cac9c2; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform4_value1">353</div>
</div>
<div id="bTitle">value2<br>
<div id="platform4_value2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="infobox infobox5" id="platform2">
<div class="boxbox" id="platform2" >
<div class="col-lg-6" style="background-color: #8a3ab9; min-width: 50px;">
<img src="">
</div>
<div class="col-lg-6" style="float: left;">
<div class="container">
<div id="sTitle">value1<br>
<div id="platform2_value1">404</div>
</div>
<div id="bTitle">value2<br>
<div id="platform2_value2">6,364</div>
</div>
</div>
</div>
</div>
</div>
</div>

Use: element.eq(n); where n is the index value of the element

change image to another image

im trying to change a image to another image when the user clicks on the options they have of images or colors, i have a picture below to show what im trying to do
this are the links for second images
http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg
http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg
html
<div class="container">
<p class="img-main">
<a href="#" class="overlaybox-img">
<img src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">
<li class="defaultColor selected">
<div class="inner">
<div class="description">BLACK</div>
<div class="rgbColor" data-color="000000" style="background-color: #000000"></div>
</div>
</li>
<li>
<div class="inner">
<div class="description">WHITE</div>
<div class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
</div>
</li>
<div class="altImages">
<ul class="alternativeImages">
<li class="selected">
</li>
<li>
<img alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
</li>
</ul>
</div>
</ul>
</div>
</div>
css:
.container {
min-height: 565px;
width: 878px;
margin: 0 auto;
padding-top: 220px;
position: relative;
}
body{
background-color: #000;
}
.img-main {
margin-bottom: 10px;
text-align: center;
float: left;
margin-top: 0px;
}
#colorsAndAltContainer {
position: relative;
top: 0;
right: 0;
width: 70px;
height: 300px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.description {
display: none;
}
.rgbColor {
border: 1px solid #cbcbcb;
width: 13px;
height: 13px;
}
.selectColor {
float: left;
}
.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 0px;
}
.altImages {
position: absolute;
width: 70px;
bottom: 0;
right: 0;
}
.alternativeImages {
bottom: 0;
}
.alternativeImages li {
cursor: pointer;
margin-top: 6px;
}
img {
display: block;
}

First assign an ID to your T-shirt image:
<img id="t-shirt" alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
Then on your black & white buttons assign a data attribute with the URL of the image the t-shirt will be changed to:
<div class="inner" data-image-id="http://urltoblackimage.jpg"></div>
Then use jQuery to change the image src on click:
$('div.inner').click(function() {
var image = $(this).attr('data-image-id');
$('#t-shirt').attr('src', image);
});
Maybe give your div class="inner" a better trigger name with an ID or a more descriptive class name to avoid conflicts.

Here is the simplest way to do it in plain Javascript.
function switchImages(){
if(document.getElementById("mainImage").src != "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg") {
document.getElementById("mainImage").src = "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg";
document.getElementById("smallImage").src = "http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg";
}else{
document.getElementById("mainImage").src = "http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg";
document.getElementById("smallImage").src = "http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg";
}
}
.container {
min-height: 565px;
width: 878px;
margin: 0 auto;
padding-top: 220px;
position: relative;
}
body{
background-color: #000;
}
.img-main {
margin-bottom: 10px;
text-align: center;
float: left;
margin-top: 0px;
}
#colorsAndAltContainer {
position: relative;
top: 0;
right: 0;
width: 70px;
height: 300px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.description {
display: none;
}
.rgbColor {
border: 1px solid #cbcbcb;
width: 13px;
height: 13px;
}
.selectColor {
float: left;
}
.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 0px;
}
.altImages {
position: absolute;
width: 70px;
bottom: 0;
right: 0;
}
.alternativeImages {
bottom: 0;
}
.alternativeImages li {
cursor: pointer;
margin-top: 6px;
}
img {
display: block;
}
<div class="container">
<p class="img-main">
<a href="#" class="overlaybox-img">
<img id="mainImage" src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">
<li class="defaultColor selected">
<div class="inner">
<div class="description">BLACK</div>
<div onclick="switchImages();" class="rgbColor" data-color="000000" style="background-color: #000000"></div>
</div>
</li>
<li>
<div class="inner">
<div class="description">WHITE</div>
<div onclick="switchImages();" class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
</div>
</li>
<div class="altImages">
<ul class="alternativeImages">
<li class="selected">
</li>
<li>
<img onclick="switchImage();" id="smallImage" alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
</li>
</ul>
</div>
</ul>
</div>
</div>

Here's a simple way without changing anything in your existing code.
<script>
$().ready(function(){
$('#colorsAndAltContainer li').on('click',function()
{
if($(this).find('.rgbColor').data('color') === "000000")
{
$('a.overlaybox-img img').attr("src","http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg");
$('.alternativeImage').attr("src","http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg");
}
else if($(this).find('.rgbColor').data('color') === "FFFFFF")
{
$('a.overlaybox-img img').attr("src","http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg");
$('.alternativeImage').attr("src","http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg");
}
});
$('.alternativeImage').on('click',function()
{
var smallImageUrl = $(this).attr("src");
var mainImageUrl = $(".img-main img").attr("src");
$(this).attr("src",mainImageUrl);
$(".img-main img").attr("src",smallImageUrl);
$(".img-main img").css("width","300px");
});
});
</script>
Working link : http://jsfiddle.net/b2c5e19h/5/

Add an id to the relevant <a> tag, access it with
document.getElementById('idOfTag').setAttribute('href')='someOtherImage.jpg';
This would just be several lines within a javascript function. Make the button, or whatever the user is clicking, listen and execute this function by adding onclick="yourFunctionsName()
No jquery necessary!