[Solved] Reverse code with toggle or click

[computerbarry]

Hi all

The snippet below works good after a single click. I need to reverse everything when I click the same link again. How can I do that?

$('.alerts-link').click(function () {
  $('.results').velocity("slideDown", { opacity: 1, duration: 300});
  $('div.carousel').velocity("slideUp", { opacity: 0, duration: 200});
  $('.li img').velocity("slideUp", { opacity: 0, duration: 200});
  $('i').removeClass("fa-angle-down").addClass("fa-angle-up");

});

Should I duplicate the code? Add a toggle?
I’ve generally made a slider of content, I just need a way to unslide everything with another click (do the opposite).

Thnaks, Barry

[Dormilich]

you can use slideToggle() and toggleClass() for that.

[computerbarry]

Thanks Dormilich.

I was thinking something like this, how would I do that?
And if you look at my click function, I am changing 4 elements with the single click.

Another click would reverse everything resulting in the below:

$('.alerts-link').click(function () {
$('.results').velocity("slideUp", { opacity: 0, duration: 300});
$('div.carousel').velocity("slideDown", { opacity: 1, duration: 200});
$('.li img').velocity("slideDown", { opacity: 1, duration: 200});
$('i').removeClass("fa-angle-up").addClass("fa-angle-down");

So each time the link is clicked, alternate between the two snippets.
Could we still use the toggle?

Barry

[Dormilich]

@computerbarry

And if you look at my click function, I am changing 4 elements with the single click.

… or more than that.

@computerbarry

So each time the link is clicked, alternate between the two snippets.

why alternate between the snippets when jQuery provides you functions that can do it in one snippet?

[computerbarry]

I need to do it this way because each element is contained within a separate container, different area, not all within the same div.

Do you know how I can do this with my existing code Dormilich?

Thanks, Barry

[computerbarry]

What if I put each snippet into a function, then alternate between the two functions on click.

function a(){
  $('.results').velocity("slideDown", { opacity: 1, duration: 300});
  $('div.carousel').velocity("slideUp", { opacity: 0, duration: 200});
  $('.li img').velocity("slideUp", { opacity: 0, duration: 200});
  $('i').removeClass("fa-angle-down").addClass("fa-angle-up");
}

function b(){
  $('.alerts-link').click(function () {
  $('.results').velocity("slideUp", { opacity: 0, duration: 300});
  $('div.carousel').velocity("slideDown", { opacity: 1, duration: 200});
  $('.li img').velocity("slideDown", { opacity: 1, duration: 200});
  $('i').removeClass("fa-angle-up").addClass("fa-angle-down");
}

$('.alerts-link').click(function () {
 ???
}

Is this possible?
How would I code the click to switch between the two functions?

Can anybody help?

Barry

[Dormilich]

@computerbarry

I need to do it this way because each element is contained within a separate container, different area, not all within the same div.

I don’t see why you can’t use toggle then.

based on your description your current snippet doesn’t care which container the elements are in anyways. so that would be more of a “choose-the-right-selector” problem than the need to switch snippets.

[Dormilich]

@computerbarry

How would I code the click to switch between the two functions?

As I have already said, there is no need to switch the functions. those two functions can be conveniently rewritten into one that uses toggleClass() and slideToggle().

[computerbarry]

Show me then. Thats why Im here thanks.

[Dormilich]

http://api.jquery.com/toggleClass/

http://api.jquery.com/slideToggle/

[PaulOB]

I don’t think velocity.js has a toggle so you could do something like this.

$('.alerts-link').click(function() {
    if ($('.results').is(":visible")) {
        //slideup
        $('.results').velocity("slideUp", {
            opacity: 0,
            duration: 300
        });
        $('div.carousel').velocity("slideDown", {
            opacity: 1,
            duration: 200
        });
        $('.li img').velocity("slideDown", {
            opacity: 1,
            duration: 200
        });
    } else {
        //slidedown
        $('.results').velocity("slideDown", {
            opacity: 0,
            duration: 300
        });
        $('div.carousel').velocity("slideUp", {
            opacity: 1,
            duration: 200
        });
        $('.li img').velocity("slideUp", {
            opacity: 1,
            duration: 200
        });

    }


    $('i').togleClass("fa-angle-down").toggleClass("fa-angle-up");
});

Seems a little verbose so maybe there is a shorter version.

[computerbarry]

Thats perfect Paul!
Thanks, works first time just how I need it.

Barry