Search code examples
jqueryaddclassremoveclasstoggleclass

hide on load, add one class on click then toggle with a different class one other clicks

I have a nav which I want to be hidden on load.

I then want to add a class of 'bounceIn' to that nav on clicking an with a class="nav-btn"

After the initial click I want it to toggle between the class of 'bounceIn' and 'bounceOut'

Currently I've just got this working, which bounces in then on click removes the bounceIn and adds bounceOut (ignore the animated class).

$(document).ready(function() {

  $('nav').addClass('animated bounceIn');

  $("nav").click(function () {
      $(this).removeClass('bounceIn');
      $(this).addClass('bounceOut');
  });

});

How do I easily achieve what I need?

Solution

  • You can use toggleClass method.

    $('.nav-btn').click(function () {
    $('nav').toggleClass('bounceIn bounceOut');
});