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: http://www.jsfiddle.net/tonynggg/frnYf/12

Answer 1

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.