CODEWITHSUNDEEP
javascriptjquerybutton
Dhiraj Barnwal
Dhiraj Barnwal

Reputation: 190

Clicking on Same button to Reverse Javascript effect

So I am very very new to JavaScript and unfortunately I don't know the basics too well also.

I was working on a code to make an element hidden after clicking it and again reversing back the effect by clicking the same button but I am unable to do so. Please help me here is the code:

$(function() {
    $('#boxclose').click(function(){
        $('#md-share-window').animate({'bottom':'-90px'},500,function(){});
    });
});

Upvotes: 2

Views: 1951

Answers (2)

Martin Schaer
Martin Schaer

Reputation: 4006

You can use a class to identify the state of the element you are animating.

Here's an example: http://jsfiddle.net/FgDaq/

$('#boxclose').click(function() {
    var c = 'on',
        el = '#md-share-window',
        duration = 500;

    if ($(el).hasClass(c)) {
        $(el).animate({'bottom': 0}, duration)
            .removeClass(c);
    } else {
        $(el).animate({'bottom': '-90px'}, duration)
            .addClass(c);
    }
});

Upvotes: 1

colestrode
colestrode

Reputation: 10658

You'll need to get the initial position (or hard code it) and keep track of whether you are in the initial or updated position:

$(function() {
    var shareWindow = $('#md-share-window');
    var initialPosition = shareWindow.css('bottom'); //get initial position
    var atInitialPos = true; //whether this is the initial or updated position

    $('#boxclose').on('click', function(){
        var newPosition = atInitialPos ? '-90px' : initialPosition; //determines new position
        shareWindow.animate({'bottom': newPosition}, 500);
        atInitialPos = !atInitialPos; //toggle initial position boolean
    });
});

Upvotes: 1

Related Questions