Jquery css if color text condition

Question

I have this code. The problem is that everything is working fine except the color of the text does not change.

jQuery:

$("#btnContactMob").on("click", function () {
$("#contactMob").stop(true).slideToggle(function () {
    if ($('#contactMob').is(':visible')) {
        $('#btnContactMob').css(
          'background-color', '#FFF',
          'color', '#FFF');
    } else {
        $('#btnContactMob').css('background-color', '#CCCCCC');
    }
 });

});

CSS:

#btnContactMob {
cursor: pointer;
width: 100%;
height: 55px;
color: #333;
background-color: #CCCCCC;
border-top:1px solid #1a1a1a;
font-family: Lato-Regular;
text-align: center;
padding-top: 10px;
font-size: 26px;
}
#contactMob {
width: 100%;
height:100%;
position: relative;
background-color: #FFF;
float: left;
display: none;
}

Answer 1

The method .css() accepts an object to change several properties at the same time. The correct syntax is pairs 'propriedade': 'valor'

Example:

{   
    'propriedadeCSS_A': 'valor_A',  
    'propriedadeCSS_B': 'valor_B',     
}  

Test like this in your code:

$('#btnContactMob').css({
      'background-color': '#FFF',
      'color': '#FFF'
});

Answer 2

Your syntax is wrong, you should use a literal object in the function parameter jQuery.fn.css, so you can spend as many properties as you need.

Take an example:

$('#btnContactMob').css({
    backgroundColor : '#fff',
    color : '#fff'
});

You can check the official documentation of this function clicking here.