CODEWITHSUNDEEP
jquerycssif-statementselector
Pim Peters
Pim Peters

Reputation: 43

jQuery CSS change on IF statement

I'm working on a project in jQuery and I'm selecting multiple CSS to change on a condition:

if (jQuery('#1').is(":visible")) {
      jQuery('#2').css({"border-top":"0px", "border-bottom":"7px solid #0767B1"});    
      jQuery('#3').css({"display:table-cell"}); 
}

It works with only the #2 css change, but when I add #3 it isn't working anymore.

Upvotes: 1

Views: 6200

Answers (3)

Frank W
Frank W

Reputation: 891

Try it like this:

if (jQuery('#1').is(":visible")) {
      jQuery('#2').css({"border-top":"0px", "border-bottom":"7px solid #0767B1"});    
      jQuery('#3').css("display", "table-cell"); 
}

The jQuery .css() method can be used in two ways. You can manipulate a single attribute, which looks like .css("attribute", "value");, or you can manipulate multiple values, but that has a different writing: .css({"attribute" : "value", "attribute2" : "value"});. But you can use the second method (as you tried) also for just a single attribute, I didn't notice your small mistake but as Vucko mentioned you just forgot to surround the : with ", so this solution was what you were looking for (but it's usually for multiple arguments as you use the { } brackets):

jQuery('#3').css({"display":"table-cell"});

And my recommendation was to use the single attribute notation:

jQuery('#3').css("display", "table-cell");

Upvotes: 3

Tejas Savaliya
Tejas Savaliya

Reputation: 638

You can use below code for css change using jquery

// For single values :
if($('#example').css('background-color','yellow')) {
    $('#1').css("display","none");
}

// For Multiple values :
if($('#example').css('background-color','yellow')) {    // Condition code
    $('#1').css("display","none");
    $('#2').css({
      'background-color' : 'yellow',
      'font-weight' : 'bolder'
    });
}

Upvotes: 0

Vucko
Vucko

Reputation: 20834

Put the : out of the quotes: 

jQuery('#3').css({                        //this is used for multiple values
    "display":"table-cell"
});

Or like:

jQuery('#3').css("display","table-cell"); //for single values


More at Jquery .css() syntax

Upvotes: 3

Related Questions