We Keep Coding

How can I change the background color of a complete section after clicking on one of it's child elements?

I am working on a personal project trying to match the below design:
I am on what I see as the hardest part. When clicking on one of the 6 different colored boxes, there should be further information popping up like below:
I am trying to first implement a background color change when the Facebook Ad Campaign box is clicked. When clicked, the background color of the whole container (which holds the 6 boxes) should change.
I believe jQuery is the right way to go about this but having tried the below it is not working:
$("#fbAdCampaigns").click(function(){
$(#container-parent").backgroundColor = "red";
}
Or, trying this to test if it changes the first out of the 6 boxes:
$("#fbAdCampaigns").click(function(){
$("#fbAdCampaigns").css({ "background-color": "#ffe"});
})
Neither are working as intended as nothing happens.
Please see what I have done so far here:
https://codepen.io/JoyFulCoding/pen/EzWyKv
Many thanks in advance for any assistance.

There are a couple of problems here.
Delete your in-line <script> tags after the imports and move them to the JS section, which would be an external file in a local project.
You only need one document.ready function.
Instead of .click use .on('click', function() ...)
Instead of .css('attribute': 'value') use .css('attribute', 'value')
As a best practice, you should not use inline CSS and Javascript when you already have CSS and JS files.
Here's some working code that doesn't do exactly what you want, but should give you the way forward:
$(document).ready(function() {
$("#menu").on('click', function() {
$("#icon").toggleClass("fa-times");
});
$("#fbAdCampaigns").on('click', function(){
$("#fbAdCampaigns").css("background-color", "#000000");
});
});

You're changing the color of the container, but it isnt visible because of the 6 boxes on top of it. Try something like this, which changes the color of each box when clicked:
https://codepen.io/aprouja1/pen/mYwEeX?editors=0010
function changeBackground(){
const clickedColor = this.style.backgroundColor;
divs.forEach(div=>div.style.backgroundColor=clickedColor)
}

You can add a class to the #fbAdCampaigns element to handle the CSS changes or use .css().
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").addClass("bg-color");
});
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").css("background-color", "#fff");
});
Using .addClass also means you can revert the change easily with .removeClass. Alternatively you could use toggleClass
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").removeClass("bg-color");
});
$("#fbAdCampaigns").on('click', function() {
$("#fbAdCampaigns").toggleClass("bg-color");
});
To access the entire container you can use the jQuery method .parent()
https://api.jquery.com/parent/
https://codepen.io/anon/pen/arwZZm

How to run a jQuery function only for child elements?

I'm trying to collapse all child comments including the parent comment when some clicks on the icon nested inside parent comment.
With below jQuery code I was able to get the comments box collapse but now the comments located inside another section are also getting collapsed.
jQuery code -
$('.comment-toggle pre').on('click', function(e) {
$(".single-comment-wrapper .comment-text, .single-comment-wrapper .comment-bottom, .single-comment-outer .child-comment ").slideToggle('fast', function() {
if ($(this).is(':visible')) {
$(".comment-toggle pre").text('[–]');
} else {
$(".comment-toggle pre").text('[+]');
}
});
});
$('.comment-toggle pre').on('click', function(e) {
$('.single-comment-wrapper .left-side').slideToggle('fast');
});
Since HTMLand CSS was too long. I've created a codepen. Below is the direct link to it.
https://codepen.io/anon/pen/Vzrvbm
Thanks in advance.

The structure of your divs makes this tricky, I've been playing around on the fiddle for ~10mins and have come up with this - its heading in the right direction but not perfect...
$('.comment-toggle pre').on('click', function(e) {
$(this).parents('.single-comment-wrapper').next().slideToggle('fast', function() {
All the plus and minuses change because currently your code is targeting classes, it needs to change to be relative to the +/- clicked so $(this). etc

Update you jQuery to search elements relative to your clicked element:
$('.comment-toggle pre').on('click', function(e) {
// find main comment element
var rootComment = $(this).closest('.single-comment-wrapper');
// hide child comments of current comment
var children = rootComment.parent().find('>.child-comment');
children.slideToggle('fast');
// hide left part
rootComment.find('.left-side').slideToggle('fast');
// hide current comment
rootComment.find('.comment-text').toggle('fast', function() {
if ($(this).is(':visible')) {
rootComment.find(".comment-toggle pre", this).text('[–]');
} else {
rootComment.find(".comment-toggle pre", this).text('[+]');
}
});
});
Also, if you can change markup to include children elements in the context of the main comment element it would be much more easier to work with. Tree-like view based on ul would simplify markup and reduce amount of HTML elements.

I think, you should use different classes for divs. Because when you click .content-togle class, javascript code executes actions for all .single-comment-wrapper .comment-text, .single-comment-wrapper .comment-bottom, .single-comment-outer .child-comment classes.

Trouble with Accordion and toggling icons

I am trying this for hours, but seems I have somehow a total brain-fart
What I want to achieve is making an accordion with toggling icons and sliding up panels.
This basically works the minus changes to plus but not when I toggle click the certain header.
$('.accordion-wrapper').on('click', function (e) {
e.stopPropagation();
$(this).next('div.accordion-panel').stop(true, false, true).slideToggle();
// $(this).find('.unalex-plus').toggleClass('glyphicon-plus glyphicon-minus');
$('div.accordion-panel').not($(this).next('div.accordion-panel')).slideUp();
if (!$(this).hasClass('active-panel')) {
$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$(this).find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus ');
$(this).addClass("active-panel");
} else {
$('this').find('.unalex-plus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-plus');
$(this).removeClass('active-panel');
}
});
This is my fiddle: https://jsfiddle.net/emd381md/11/

I've edited your Fiddle.
You shouldn't use addClass and removeClass in that manner.
toggleClass is a better (and more readable) solution.

Here is a working demo https://jsfiddle.net/ju9L9rne/13/.
Issues were with the names of classes in the if statement. You were using .unalex-plus which is a class all the accordians have, which is what caused the problems.
So I just changed that class to either .glyphicon-minus or .glyphicon-plus depending on, which was needed.
The changed code:
if (!$(this).hasClass('active-panel')) {
$('.accordion-wrapper').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$(this).find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus ');
$(this).addClass("active-panel");
} else {
$('.accordion-wrapper').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$(this).find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus');
$(this).removeClass('active-panel');
}

I don't check your whole code but this looks a bit crazy, maybe the error is here?
$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-plus');
You first remove glyphicon-plus and add it afterwards.

jQuery slideToggle for multiple divs

What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/

Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});

Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.

find ID of parent DIV and fade DIV out

Im trying to fade out a DIV when clicking a link within the DIV itself. Here is my code:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeTo("slow", 0);
});
The reason I'm not specifying the ID directly is because I want to use this to fade out multiple DIVs with different ID's.
The above code was returning the ID when I setup an alert but not fading the DIV out or anything else I tried to so... any help here would be appreciated. The HTML is:
<div id="First-Block" class="item">
<p>text here</p>
<p>Back</p>
</div>
Thank you!

You should use fadeOut("slow") instead.
Try changing your code to:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeOut("slow");
});
To improve this even further you can shorten your code to:
$(".hideinfo").click(function() {
$(this).closest(".item").fadeOut("slow");
});
Just to mention as well that by clicking on an anchor it will jump to the top of the page using #. I would take a look at .preventDefault()
You can also check out the API here -> http://api.jquery.com/fadeOut/

Use fadeOut() instead since your primary goal is to affect the overall visibiltity not a given opacity.

jsBin demo
$(".hideinfo").click(function( e ){
e.preventDefault(); // prevent default anchor link behavior
$(this).closest('.item').fadeTo(400, 0);
});
Additionally try to wrap the above into a document ready :
$(function(){
// code here.
});