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

Can we see your html too? I'm wondering if there's a span or something in that <p> that has its own colour. — Someone
– Someone, Commented May 31, 2018 at 12:51
In your js fiddle you have $('#franchisehub p').css('color', 'blue !important'); just change 'blue !important' to 'white' and it should work. If not, which browser are you using? — naklar
– naklar, Commented May 31, 2018 at 12:52
Those 600 lines of code can probably be cut down to about 6 lines or so by using common classes and adding/removing a selected class — charlietfl
– charlietfl, Commented May 31, 2018 at 12:54
Soooooo much code, just to change the color of a card and display a div... You should rather toggle a class and manage everything from CSS... — Jeremy Thille
– Jeremy Thille, Commented May 31, 2018 at 12:56
Removed my answer because it was false. All you have to do in your fiddle is change the colour from blue to white and remove the !important and it works just fine. jsfiddle.net/bL19pg8g — Someone
– Someone, Commented May 31, 2018 at 13:21

Prabin Sapal · Accepted Answer · 2018-05-31 13:29:23Z

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');

  }
});

Thanks for the answer. I have one more similar question. In the fiddle what changes I need to make in the jquery code if I want to hide the inverted triangle shape arrow on click of any product item second time?
Check jsfiddle: jsfiddle.net/qdyLL0ww/4 , Your JS seems to be too much you can reduce that like i did check the final email marketing click function

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related