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 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.

Keep the hover state on the last clicked menu item

I have added a nice (jquery + css) navigation menu to my website, but there's a small problem. When I click on a menu item, the light blue box jumps back to the first item, and I would like the box to stay on the clicked item, but I have no clue how to make it happen.
Here's an example: http://jsfiddle.net/Stylock/ta8g4/
In that example, it actually works how I want, but on my website it doesn't work for some reason. Any help would be much appreciated.

You could add a class to the item like .selected
And in your css you apply the same style to the .selected than the :hover
http://api.jquery.com/addClass/
Or you cloud also modify the css using jQuery. But the first solution is more flexible.
Edit: Use the callback function to add/remove class, after your effect

This might be a solution to the right direction:
Onclick check if the menu already has a classname to get the background changed
remove that class from there
Add the class where you clicked
some minor css changes are needed and u will have solved it
have a great day

you can add a class when other page loads like to add on all pages like
this is bad one
<script type="text/javascript">
$(window).load(function () {
$("#index").toggleClass("highlight");
});
$(window).unload(function () {
$("#index").toggleClass("highlight");
});
</script>
site i used this at http://www.hoteloperaindia.com/
or like this short one to add this to master page
<script>
$(function () {
var loc = window.location.href; // returns the full URL
if (location.pathname == "/") {
$('#home').addClass('active');
}
if (/index/.test(loc)) {
$('#home').addClass('active');
}
if (/about/.test(loc)) {
$('#about').addClass('active');
}
if (/accommodation/.test(loc)) {
$('#accommodation').addClass('active');
}
if (/gallery/.test(loc)) {
$('#gallery').addClass('active');
}
if (/tariff/.test(loc)) {
$('#tariff').addClass('active');
}
if (/facilities/.test(loc)) {
$('#facilities').addClass('active');
}
if (/contact/.test(loc)) {
$('#contact').addClass('active');
}
});
</script>
site where i used this one http://rtshotel.in/
change it with your code

JQuery Hover Code: Adding an If Statement breaks it

I have this code that makes a box with information follow the mouse. It's really simple, just checks the custom attribute "description" in the div that you hover over and puts that in the box. However, I want to make it so if that div also has a certain CSS class, then it would put other information in the box, in addition to the other code still working.
$(document).ready(function(){
$(".hover").mousemove(function(e){
if ("div").hasclass("item"){
alert("div hasclass item");
} else {
var description = $(this).attr("description");
$("#hoverdiv").text(description).show();
$("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+5);
}
}).mouseout(function(){
$("#hoverdiv").hide();
});
});
that's the code I have now. None of the hovers in my page work at all. This is the code that works. It's identical in every way, except no if statement.
$(document).ready(function(){
$(".hover").mousemove(function(e){
var description = $(this).attr("description");
$("#hoverdiv").text(description).show();
$("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+5);
}).mouseout(function(){
$("#hoverdiv").hide();
});
});
I've tried time and time again to get this to work, and through my testing, it would seem that simply adding an if statement breaks the entire thing. I have absolutely no idea how to proceed or how to fix it.

The culrpit..
if ("div")
Maybe you were trying
if($("div").something()){
}

if ("div").hasclass("item") {
Should be:
if ( $("div").hasClass("item") ) {
For some more you can also test:
if ( $("div").is(".item") ) {
Read about jQuery .is()

How to toggle every jQuery element except the clicked?

So I'm trying to achieve something seemingly very basic in jQuery. I have a number of "headers," and when I click on a header I want the info beneath that header to slide down, and all other header info to slide up (so that only one header is showing info at a time).
Here's sudo code of what I want to happen:
$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
$(this).children('.game-info-text').slideToggle("Slow");
[all other ('.game-info-text')].slideUp(fast)
});
For the life of me though, I can't figure out how to code that second line ([all other ('.game-info-text')]). Any help is much appreciated!
(I'm implementing this as a drupal behavior, which is why I have the "jquery-processed" class being added)

Something like:
$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
$(this).children('.game-info-text').slideToggle("Slow");
$('.more-info-header').not(this).children('.game-info-text').slideUp(fast);
// ^-- removes the clicked element from all `.more-info-header`
});
Reference: .not()

Sounds like you're after the jQuery UI Accordion plugin.

$('.more-info-header:not(.jquery-processed)')
.addClass('jquery-processed').click( function(e) {
var these = $(this).children('.game-info-text').slideToggle("slow");
$('.game-info-text').not(these).slideUp("fast");
});
With the not() function you can exclude the already selected elements.

Like this?
$('.more-info-header').click(function(e){
var target = e.target || e.srcElement;
$(this).children().not(target).find('.game-info-text').slideUp('fast');
$('.game-info-text', target).slideToggle("slow");
});