change css style on click with jquery

Question

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

Felix Kling · Accepted Answer · 2011-06-14 18:50:42Z

3

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

answered Jun 14, 2011 at 18:50

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

Comments

JAiro · Accepted Answer · 2011-06-14 18:51:03Z

0

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

answered Jun 14, 2011 at 18:51

JAiro

6,0393 gold badges24 silver badges21 bronze badges

Comments

Phil · Accepted Answer · 2011-06-14 18:52:32Z

0

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

answered Jun 14, 2011 at 18:52

Phil

4,2244 gold badges26 silver badges40 bronze badges

Comments

KoolKabin · Accepted Answer · 2011-06-14 18:56:26Z

0

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

answered Jun 14, 2011 at 18:56

KoolKabin

17.8k37 gold badges112 silver badges145 bronze badges

Collectives™ on Stack Overflow

change css style on click with jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related