Jquery - Change Background position on 1st click, reset on the 2nd

Question

Evening all! I have half a script that I need to change the CSS background position of an element when it is clicked - this works fine. However I need the CSS to reset the background position to 0 0 on the 2nd click;

Help much appreciated!

$(document).ready(function(){
$('#login-btn').click(function(){
                $('#login-btn').css('backgroundPosition', '0px -39px');
                 }, function(){
                $('$login-btn').css('backgroundPosition', '0px 0px');

             });
            });

Answer 1

I'd put the CSS in a class, and use .toggleClass().

Example: http://jsfiddle.net/xwnKP/

$('#login-btn').click(function(){
    $(this).toggleClass('clicked');
});

css

#login-btn {
    background-position: 0 0;
}
#login-btn.clicked {
    background-position: 0 -39px;
}

If you wanted to do it the way you had it, you need to change from click() to toggle(), which is like click except that accepts more than one function argument.

Example: http://jsfiddle.net/xwnKP/1/

$('#login-btn').toggle(function() {
        $(this).css('backgroundPosition', '0px -39px');
    }, function() {
        $(this).css('backgroundPosition', '0px 0px');
});