CODEWITHSUNDEEP
jquerybackground-position
Richard
Richard

Reputation: 23

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

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');

             });
            });

Upvotes: 2

Views: 5488

Answers (1)

user113716
user113716

Reputation: 322592

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');
});

Upvotes: 7

Related Questions