Is there a way to alter the background color of an entire section once a child element within it is clicked?

Question

Is there a way to alter the background color of an entire section once a child element within it is clicked?

I am currently working on a personal project where I am attempting to replicate the design shown below:

The most challenging part for me right now is implementing the functionality that when one of the 6 differently colored boxes is clicked, additional information pops up like in the example:

My initial focus is on changing the background color when the Facebook Ad Campaign box is clicked. Upon clicking it, the background color of the entire container (which houses the 6 boxes) should change.

I believe using jQuery is the best approach for this task, but my attempts so far have been unsuccessful as the following code did not work:

$("#fbAdCampaigns").click(function(){
$(#container-parent").backgroundColor = "red";
}

Alternatively, I tried the following code to see if it changes the color of the first of the 6 boxes:

 $("#fbAdCampaigns").click(function(){
$("#fbAdCampaigns").css({ "background-color": "#ffe"});
})

Unfortunately, neither of these methods worked as expected since nothing happened. You can view what I have accomplished so far here:

https://codepen.io/JoyFulCoding/pen/EzWyKv

I greatly appreciate any assistance you can provide.

javascript jquery html css

Answer 1

Answer №1

There seem to be a few issues that need addressing.

Please remove the <script> tags from your HTML and place them in an external JavaScript file after all imports.
It is sufficient to have just one document.ready function for your code.
Instead of using .click, consider using .on('click', function() ...).
When applying CSS styles, use .css('attribute', 'value') instead of .css('attribute': 'value').

For better organization, avoid inline CSS and Javascript if you are already using separate CSS and JS files.

Here is a snippet of corrected code that may not meet all your requirements but can guide you:

$(document).ready(function() {

  $("#menu").on('click', function() {
    $("#icon").toggleClass("fa-times");
  });

  $("#fbAdCampaigns").on('click', function(){
    $("#fbAdCampaigns").css("background-color", "#000000");
  });

});

Answer 2

There seem to be a few issues that need addressing.

Please remove the <script> tags from your HTML and place them in an external JavaScript file after all imports.
It is sufficient to have just one document.ready function for your code.
Instead of using .click, consider using .on('click', function() ...).
When applying CSS styles, use .css('attribute', 'value') instead of .css('attribute': 'value').

For better organization, avoid inline CSS and Javascript if you are already using separate CSS and JS files.

Here is a snippet of corrected code that may not meet all your requirements but can guide you:

$(document).ready(function() {

  $("#menu").on('click', function() {
    $("#icon").toggleClass("fa-times");
  });

  $("#fbAdCampaigns").on('click', function(){
    $("#fbAdCampaigns").css("background-color", "#000000");
  });

});

Answer 3

Answer №2

The container's color change may not be noticeable due to the presence of six boxes positioned on top of it. A solution could involve altering the color of each box individually upon being clicked:

Explore this example for reference

function adjustColorScheme(){
  const selectedColor = this.style.backgroundColor;
divElements.forEach(element=>element.style.backgroundColor=selectedColor)
}

Answer 4

The container's color change may not be noticeable due to the presence of six boxes positioned on top of it. A solution could involve altering the color of each box individually upon being clicked:

Explore this example for reference

function adjustColorScheme(){
  const selectedColor = this.style.backgroundColor;
divElements.forEach(element=>element.style.backgroundColor=selectedColor)
}

Answer 5

Answer №3

If you want to modify the CSS of the #fbAdCampaigns element, there are a couple of options available to you. You can either add a class and handle the changes using CSS, or use the .css() method.

$("#fbAdCampaigns").on('click', function() {
  $("#fbAdCampaigns").addClass("bg-color");
});

$("#fbAdCampaigns").on('click', function() {
  $("#fbAdCampaigns").css("background-color", "#fff");
});

By using .addClass, you have the flexibility to easily revert the change by using .removeClass. Another approach would be to utilize toggleClass for more dynamic behavior.

$("#fbAdCampaigns").on('click', function() {
  $("#fbAdCampaigns").removeClass("bg-color");
});


$("#fbAdCampaigns").on('click', function() {
  $("#fbAdCampaigns").toggleClass("bg-color");
});

If you need to target the entire container, you can make use of the jQuery method .parent()

https://api.jquery.com/parent/

For a live example, check out this link: https://codepen.io/anon/pen/arwZZm

Answer 6

If you want to modify the CSS of the #fbAdCampaigns element, there are a couple of options available to you. You can either add a class and handle the changes using CSS, or use the .css() method.

$("#fbAdCampaigns").on('click', function() {
  $("#fbAdCampaigns").addClass("bg-color");
});

$("#fbAdCampaigns").on('click', function() {
  $("#fbAdCampaigns").css("background-color", "#fff");
});

By using .addClass, you have the flexibility to easily revert the change by using .removeClass. Another approach would be to utilize toggleClass for more dynamic behavior.

$("#fbAdCampaigns").on('click', function() {
  $("#fbAdCampaigns").removeClass("bg-color");
});


$("#fbAdCampaigns").on('click', function() {
  $("#fbAdCampaigns").toggleClass("bg-color");
});

If you need to target the entire container, you can make use of the jQuery method .parent()

https://api.jquery.com/parent/

For a live example, check out this link: https://codepen.io/anon/pen/arwZZm

Is there a way to alter the background color of an entire section once a child element within it is clicked?

Answer №1

Answer №2

Answer №3

Similar questions

Unable to retrieve information from compact JSON files

My jquery is malfunctioning when trying to retrieve values

CF component not able to accept arguments when invoked by JavaScript through cfajaxproxy

Utilize Lodash to iterate through functions in a loop and retrieve the first matching result

Encountering issue with Django locating static file (1.5) showing ERROR 404 code 1649

The JQuery datepicker fails to provide the date in the format mm/dd/yy

Show the result as "Content-Type: image/jpeg" on the webpage

What occurs when a numerical value is added to an element within an array?

Leveraging Jquery Splice

Retrieve documents from mongodb that were created in the past half hour

What is the best way to customize the primary Button style in Bootstrap?

Update the website URL in the browser using jQuery

Customize Your Google Maps with Checkboxes for Style Options

Tips for showcasing the individual product page in full width on woocommerce

Creating personalized components - a step-by-step guide

manage user assignments for multiple events in Django

What are the advantages of utilizing buffer geometries in Three.js?

Exploring Various JSON Arrays

Obtain the value of a specific input element across several forms using jQuery

Is there a way to modify the props.data in a child component?