How to change the color of a text on click in jquery/javascript?

Question

I have a fiddle which I have replicated by seeing the screenshot below.

The fiddle is working in a way that on click of the 2 square boxes, another box appears at the bottom.

The JQuery code which I have used in order to get that:

$("#franchisehub").click(function() {
  if ($('.franchisehubtv').css('display') == "flex") {
    $('.franchisehubtv').css('display', 'none');

  } else {
    $('#franchisehub').css('background-color', 'green'); 
    $('#franchisehub p').css('color', 'white');  // Added line
    $('#cloudbasedmobile').css('background-color', 'white');    
    $('#businessanalytics').css('background-color', 'white');   
    $('#techsupport').css('background-color', 'white'); 
    $('#ordermanagement').css('background-color', 'white');  
    $('#employeemanagement').css('background-color', 'white'); 
    $('#whitelabel').css('background-color', 'white');
    $('#emailmarketing').css('background-color', 'white');   
    $('#royaltycalculator').css('background-color', 'white');  
    $('#customizationtools').css('background-color', 'white');
    $('#goalsetting').css('background-color', 'white');  
    $('#custominvoicing').css('background-color', 'white'); 
    $('#leadtracking').css('background-color', 'white');
    $('#brandcontrol').css('background-color', 'white');    


    $('.franchisehubtv').css('display', 'flex'); 
    $('.cloudbasedtextipad').css('display', 'none');
    $('.business-analytics').css('display', 'none');
    $('.tech-support').css('display', 'none');
    $('.order-management').css('display', 'none');
    $('.employee-management').css('display', 'none');
    $('.white-label').css('display', 'none');
    $('.brand-control').css('display', 'none');
    $('.lead-tracking').css('display', 'none');
    $('.custom-invoicing').css('display', 'none');
    $('.goal-setting').css('display', 'none');
    $('.customization-tools').css('display', 'none');
    $('.royalty-calculator').css('display', 'none');
    $('.email-marketing').css('display', 'none');
  }

});

Problem Statement:

What I am trying to accomplish is, on click of a green image as present in the screenshot above, the text color (Franchise Hub or Cloud Based & Mobile) inside that 2 squares boxes should turn WHITE.

I have used the following line in order to make that happen but it doesn't seems to work.

$('#franchisehub p').css('color', 'white'); // Added line

Answer 1

Hey Please check the code in my codepen so basically if you change the both text color to white then it is working fine in selected(green image) but in another box the background is white so the text disappears. So I only changed the p text to white of selected(green image) box.And I have edited on following two click functions

$("#franchisehub").click(function() {
  if ($('.franchisehubtv').css('display') == "flex") {
    $('.franchisehubtv').css('display', 'none');

  } else {
    $('#franchisehub').css('background-color', 'green'); 
    $('#franchisehub p').css('color', 'blue !important'); 
  $('#franchisehub').find('p').css({color: '#fff'});
  $('#cloudbasedmobile').find('p').css({color: '#222'});
    $('#cloudbasedmobile').css('background-color', 'white');    
    $('#businessanalytics').css('background-color', 'white');   
    $('#techsupport').css('background-color', 'white'); 
    $('#ordermanagement').css('background-color', 'white');  
    $('#employeemanagement').css('background-color', 'white'); 
    $('#whitelabel').css('background-color', 'white');
    $('#emailmarketing').css('background-color', 'white');   
    $('#royaltycalculator').css('background-color', 'white');  
    $('#customizationtools').css('background-color', 'white');
    $('#goalsetting').css('background-color', 'white');  
    $('#custominvoicing').css('background-color', 'white'); 
    $('#leadtracking').css('background-color', 'white');
    $('#brandcontrol').css('background-color', 'white');    


    $('.franchisehubtv').css('display', 'flex'); 
    $('.cloudbasedtextipad').css('display', 'none');
    $('.business-analytics').css('display', 'none');
    $('.tech-support').css('display', 'none');
    $('.order-management').css('display', 'none');
    $('.employee-management').css('display', 'none');
    $('.white-label').css('display', 'none');
    $('.brand-control').css('display', 'none');
    $('.lead-tracking').css('display', 'none');
    $('.custom-invoicing').css('display', 'none');
    $('.goal-setting').css('display', 'none');
    $('.customization-tools').css('display', 'none');
    $('.royalty-calculator').css('display', 'none');
    $('.email-marketing').css('display', 'none');
  }

});

$("#cloudbasedmobile").click(function() {

  if ($('.cloudbasedtextipad').css('display') == "flex") {
    $('.cloudbasedtextipad').css('display', 'none');

  } else {
    $('#franchisehub').css('background-color', 'white'); 
    $('#cloudbasedmobile').css('background-color', 'green');    
    $('#businessanalytics').css('background-color', 'white');   
    $('#techsupport').css('background-color', 'white'); 
    $('#ordermanagement').css('background-color', 'white');  
    $('#employeemanagement').css('background-color', 'white'); 
    $('#whitelabel').css('background-color', 'white');
    $('#emailmarketing').css('background-color', 'white');   
    $('#royaltycalculator').css('background-color', 'white');  
    $('#customizationtools').css('background-color', 'white');
    $('#goalsetting').css('background-color', 'white');  
    $('#custominvoicing').css('background-color', 'white'); 
    $('#leadtracking').css('background-color', 'white');
    $('#brandcontrol').css('background-color', 'white');    

$('#franchisehub').find('p').css({color: '#222'});

$('#cloudbasedmobile').find('p').css({color: '#fff'});

    $('.cloudbasedtextipad').css('display', 'flex');
    $('.franchisehubtv').css('display', 'none'); 
    $('.business-analytics').css('display', 'none');
    $('.tech-support').css('display', 'none');
    $('.order-management').css('display', 'none');
    $('.employee-management').css('display', 'none');
    $('.white-label').css('display', 'none');
    $('.brand-control').css('display', 'none');
    $('.lead-tracking').css('display', 'none');
    $('.custom-invoicing').css('display', 'none');
    $('.goal-setting').css('display', 'none');
    $('.customization-tools').css('display', 'none');
    $('.royalty-calculator').css('display', 'none');
    $('.email-marketing').css('display', 'none');

  }
});