Replace classes within a click function

Question

I need to replace some class names within a click function.

I have this line of code, which adds the correct class when a button is clicked:

showLeft.onclick = function() {
    $(".cbp-spmenu-open ul li.inview").toggleClass("animated bounceInLeft visible");
};

When I click the button again, how can I replace the above class names with the following: animated bounceOutLeft hidden and vice-versa?

Answer 1

You just want to replace visible with hidden and bounceIn with bounceOut

.toggleClass("bounceInLeft visible").toggleClass("bounceOutLeft hidden");

and use addClass for animated , which you want to keep.

See example fiddle

Answer 2

How about this:

showLeft.onclick = function() {
    if($(".cbp-spmenu-open ul li.inview").hasClass('hidden')) {
        $(".cbp-spmenu-open ul li.inview").toggleClass("animated bounceInLeft visible");
    } else {
        $(".cbp-spmenu-open ul li.inview").toggleClass("animated bounceOutLeft hidden");
    }
}

It checks whether your element is hidden or not and make it visible or not.

Answer 3

In your html (if possible) try to add bounceOutLeft and hidden to the li.inview element

If not add them with jquery on page load.

$(".cbp-spmenu-open ul li.inview").addClass("bounceOutLeft hidden"); // only when you can't edit the html
showLeft.onclick = function() {
  $(".cbp-spmenu-open ul li.inview").toggleClass("animated bounceOutLeft bounceInLeft visible hidden");
};

Answer 4

Like this:

showLeft.onclick = function() {
    if($(".cbp-spmenu-open ul li.inview").hasClass("hidden")
        $(".cbp-spmenu-open ul li.inview").toggleClass("animated bounceInLeft visible");
    else
       $(".cbp-spmenu-open ul li.inview").toggleClass("animated bounceOutLeft hidden");
};

Answer 5

Use this one

showLeft.onclick = function() {
    $(".cbp-spmenu-open ul li.inview").toggleClass('bounceInLeft visible').toggleClass('bounceOutLeft hidden');
};

or this :

showLeft.onclick = function() {
    var $li = $(".cbp-spmenu-open ul li.inview");
    if($li.hasClass('visible'))
        $li.removeClass('bounceInLeft visible').addClass('bounceOutLeft hidden');
    else
        $li.removeClass('bounceOutLeft hidden').addClass('bounceInLeft visible');
};