All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Jquery Slide animation toggle back and forth

  • Anonymous
    # 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]( “”)

    # April 19, 2013 at 10:47 pm

    Something like this:

    # 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:

    # April 20, 2013 at 10:44 am

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

    if block is up function() {
    bring it back down
    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) {
    top: 0
    } else {
    top: 210

    # April 20, 2013 at 11:00 am

    Less buggy:

    var container = $(‘#container’);
    var nextTop = 0;
    $(‘#arrow’).on(‘click’, function() {
    top: nextTop
    if (nextTop == 0)
    nextTop = 210;
    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]( “”)

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed