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

jQuery function doesn't respond to ".click" until I move the cursor?

I have a website with a simple CSS style switcher. I use the following code for the function that handles clicking the two theme buttons, initiating the switch from dark to light and vice versa:
<script>
$(function() {
$(".light").click(function(){
$("link").attr("href", "css/lightHome.css");
$(".light").attr("disabled", "disabled");
$(".dark").removeAttr("disabled", "disabled")
})
$(".dark").click(function(){
$("link").attr("href", "css/home.css");
$(".dark").attr("disabled", "disabled");
$(".light").removeAttr("disabled", "disabled")
})
});
</script>
Everything about it operates exactly as I want, except the fact that when I click the button, nothing happens. But the second I shift the cursor position after the click, then the switch occurs. I don't have the best jQuery grasp, so I am hoping it is a simple lack of understanding regarding the DOM processes. Possibly having to do with the lack of "on ready"?
I've tried clicking and waiting several minutes, and nothing happens until I move the cursor.
The website:
http://watsoncn.info

Instead of completely switching the CSS file, an alternative solution would be to have a single CSS file with both your styles and then prefixing all your selectors with .theme.dark or .theme.light;
This would be pretty easy to do with nesting in LESS or SASS if you're using them (if you're not, you really should consider it. I can't imagine writing CSS without a preprocessor now), but might be cumbersome in pure CSS.
CSS:
.theme.dark <rest of selectors> {
//CSS
}
.theme.light <rest of selectors> {
//CSS
}
HTML:
<body class="theme">
and then code that runs on button clicks would be
$('body').addClass('dark')
$('body').removeClass('light')
and
$('body').addClass('light')
$('body').removeClass('dark')

Try this function:
function toggleCss(file, index) {
var oldFile = document.getElementsByTagName("link").item(index);
var newFile = document.createElement("link");
newFile.setAttribute("rel", "stylesheet");
newFile.setAttribute("type", "text/css");
newFile.setAttribute("href", file);
document.getElementsByTagName("head").item(0).replaceChild(newFile, oldFile);
}
$(".dark").on("click", function() {
toggleCss("css/lightHome.css");
$(".dark").attr("disabled", "disabled");
$(".light").removeAttr("disabled", "disabled");
});
$(".light").on("click", function() {
toggleCss("css/home.css");
$(".light").attr("disabled", "disabled");
$(".dark").removeAttr("disabled", "disabled");
});

Try to add use not a JavaScript, but the "checkbox trick". The checkbox handler set to display none, then style the main style, and on :checked style the handler like it clicked.
With this you can not use JavaScript but make it 100% working without any bugs, if you did everything right!
You can find the DevTips channel on YouTube
https://www.youtube.com/user/DevTipsForDesigners
on his channel you can find the tutorial how to do that!

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.

JavaScript Text Transition

I am attempting to make a slideshow out of text, wherein one piece of text fades out, and another fades in, and so on. I have it working for the most part, but there is a small issue.
When the page is first loaded, all of the pieces of text are displayed at once. Each one fades in turn, and once they have all faded once they function as I want. I have used:
(function langFade() {
var lang = $('.lang, .first');
var langIndex = -1;
function showNextLang() {
++langIndex;
lang.eq(langIndex % lang.length)
.fadeIn(1500)
.delay(2000)
.fadeOut(1500, showNextLang);
}
showNextLang();
})();
as described here, but this is causing the problem described above. I've attempted using CSS to hide all but the first piece of text when the site is loaded, but this isn't doing the trick. My suspicion is that the issue is with the HTML - it is rather different to the demo. I have created a fiddle to demonstrate what I mean.
Is there any way of fixing this, either through modifying the JavaScript, or the HTML?

Try to hide the others at first with .not(':eq(0)').hide()
(function langFade() {
var lang = $('.lang, .first'),
langIndex = -1;
lang.not(':eq(0)').hide();
function showNextLang() {
++langIndex;
lang.eq(langIndex % lang.length)
.fadeIn(1500)
.delay(2000)
.fadeOut(1500, showNextLang);
}
showNextLang();
})();
Can also use .not(':first').hide() which may be a little easier to read.

Just hide them initially. And this can be done in pure CSS. Add following class:
h2.first, h2.lang {
display: none
}
Demo: http://jsfiddle.net/XbWJS/2/

.removeClass not functioning within .replaceWith

I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
var webform = document.getElementById('block-webform-client-block-18');
var unmarriedbutton = document.getElementById('unmarried');
var buyingblock = document.getElementById('block-block-10');
$(unmarriedbutton).click(function () {
$(buyingblock).fadeOut('slow', function() {
$(this).replaceWith(function () {
$(webform).removeClass('hiddenbox')
});
});
});
});
</script>
The CSS on 'hiddenbox' is nothing more than "display: none.'
There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.
Can someone please tell me where the error is? Thanks!
Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.

The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.
I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:
$(this).replaceWith(function () {
return($(webform).removeClass('hiddenbox'));
});

NB, use jquery !
var webform = $('#block-webform-client-block-18');
var unmarriedbutton = $('#unmarried');
var buyingblock =$('#block-block-10');
unmarriedbutton.click(function () {
buyingblock.fadeOut('slow', function() {
$(this).replaceWith( webform.removeClass('hiddenbox'));
});
});
Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API