CODEWITHSUNDEEP
jquery
frosty
frosty

Reputation: 5370

change css style on click with jquery

I have the following click event. I would also like to toggle the background-position: between top and bottom on click. 

$('.close').click(function () {
    $('.banner-inner-content').slideToggle('slow', function () {
    });
});

So how can i toggle between? 

.close{background-position:top}

and 

.close{background-position:bottom;}

Upvotes: 1

Views: 2454

Answers (4)

KoolKabin
KoolKabin

Reputation: 17643

try using isvisible to check if its being displayed or not and add the respective position:

$('.close').click(function () {
    $('.banner-inner-content').slideToggle('slow', function () {
        if( $(this).is(':visible') ) {
            $(this).css({backgroundPosition: 'top'});
        }
        else {
            $(this).css({backgroundPosition: 'bottom'});
        }
    });
});

Upvotes: 0

Phil
Phil

Reputation: 4224

    $('.close').click(function () {
        if($('.banner-inner-content').hasClass('top')){
            $('.banner-inner-content').removeClass('top');
            $('.banner-inner-content').addClass('bottom');
    }else{
            $('.banner-inner-content').addClass('top');
            $('.banner-inner-content').removeClass('bottom');
    }
});

Upvotes: 0

JAiro
JAiro

Reputation: 5999

you could use two differents css class (one for top and the other for bottom) and when onClick event is shooted change it.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816322

You can pass a function to .css():

$(this).css('background-position', function(i, val) {
    return val === 'top' ? 'bottom' : 'top';
});

Or you define a new class:

.close.bottom {
    background-position: bottom;
}

and use .toggleClass():

$(this).toggleClass('bottom');

Upvotes: 3

Related Questions