jQuery conditional add and remove CSS property

Question

I have a CSS border property in place currently (border-left: 1px), and onClick, I have it removed via the first jQuery function below. How can I set this up so that my second function will add back the property upon the second click? It should switch back and forth per click.

$(function(){
    $('#button').click(function() {    
        $('#button-2').css('border-left','none');
    });   
    $('#button').click(function() {
        $('#button-2').css('border-left','1px');
    });
});

I have now included the original code: www.jsfiddle.net/tonynggg/frnYf/12

Code Magician · Accepted Answer · 2012-01-08 07:09:45Z

5

Would it be easier to define a css class:

.button { border-left: 1px; }
.buttonClicked { border-left: none; }

And then use the jQuery toggleClass

So your code would be:

$(function(){
    $('#button').click(function() {    
        $('#button-2').toggleClass('buttonClicked');
    });   
});

That would then toggle your alternate css class on an off when it's clicked. If nothing else, this should get you pointed in the right direction.

answered Jan 8, 2012 at 7:09

Code Magician

24.1k7 gold badges63 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

No Results Found Over a year ago

This is the best way, much better than hard-coding CSS into javascript files.

Ayush Over a year ago

Interesting. Wasn't aware of the toggleClass method.

Tony Over a year ago

@M_M Unfortunately I couldn't get that to work. Here's the original code: jsfiddle.net/tonynggg/frnYf/12

Code Magician Over a year ago

there is no toggleCss method. Take a look at jsfiddle.net/frnYf/16 also, I would consider only creating one click event handler for #button.

Code Magician Over a year ago

@Tony my pleasure! Glad I could assist :)

Ayush · Accepted Answer · 2012-01-08 07:13:03Z

1

First, create a class that has the border:

.borderclass
{
   border-left:1px black solid;
}

And then,

$(function(){
$('#button').click(function() {    
    if ($('#button-2').hasClass('borderclass'))
        $('#button-2').removeClass('borderclass');
    else
        $('#button-2').addClass('borderclass');
    });   

});

answered Jan 8, 2012 at 7:13

Ayush

42.5k52 gold badges169 silver badges243 bronze badges

1 Comment

Tony Over a year ago

This code doesn't work unfortunately. Although it looks like the correct solution, I think maybe because the "hasClass" is not functional because #button-2 is not a class?

Collectives™ on Stack Overflow

jQuery conditional add and remove CSS property

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related