Jquery Slide animation toggle back and forth

[Anonymous]

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 “”)

[TheDoc]

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

[Anonymous]

@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?

[TheDoc]

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

[Anonymous]

@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*

[CrocoDillon]

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

[CrocoDillon]

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

[Anonymous]

@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

[Author]

Posts