Grow your CSS skills. Land your dream job.

Jquery Slide animation toggle back and forth

  • # April 19, 2013 at 10:42 pm

    How do i make the block slide back by clicking the button once more, and slide down again when clicking it again?[CODEPEN](http://codepen.io/Jarolin/pen/LbFgh “”)

    # April 19, 2013 at 10:47 pm

    Something like this: http://codepen.io/ggilmore/pen/nEouK

    # April 19, 2013 at 11:07 pm

    @TheDoc Thanks. But i was hoping for something similar to what i had. I don’t fully understand jQuery and JavaScript even less.I applied your styles but that brought on more problems than it fixes to my website. is there a way of doing it by adding just a bit of code to what i have?

    # April 19, 2013 at 11:11 pm

    What I provided is a simplified example. If you wanted to use CSS3 transitions, it can be *super* simple:

    http://codepen.io/ggilmore/pen/nEouK

    # April 20, 2013 at 10:44 am

    @TheDoc i was thinking of an “if” statement.

    if block is up function() {
    bring it back down
    }
    EDIT
    i managed to get it moving with an if statement, but am not sure how to make the if work when the button is clicked once more. *Its the same pen above*

    # April 20, 2013 at 10:57 am

    Not sure why you won’t go with Gray’s `toggleClass()` solution, but here is one (buggy) implementation of an `if` statement. Buggy if you click during animation.

    var container = $(‘#container’);
    $(‘#arrow’).on(‘click’, function() {
    if (parseInt(container.css(‘top’)) > 0) {
    container.animate({
    top: 0
    });
    } else {
    container.animate({
    top: 210
    });
    }
    });

    # April 20, 2013 at 11:00 am

    Less buggy:

    var container = $(‘#container’);
    var nextTop = 0;
    $(‘#arrow’).on(‘click’, function() {
    container.stop().animate({
    top: nextTop
    });
    if (nextTop == 0)
    nextTop = 210;
    else
    nextTop = 0;
    });

    # April 20, 2013 at 11:13 am

    @CrocoDillon That seems to be working well for now but the only problem i’m having with it is that it only happens when i click the button for the second time. It’s suppose to work on the first click.
    [pen](http://codepen.io/Jarolin/pen/LbFgh “”)

    EDIT
    never mind. i fixed and it’s working perfectly. Thank you @TheDoc @CrocoDillon

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".