CODEWITHSUNDEEP
jquery
ammar ahmed
ammar ahmed

Reputation: 11

jquery add class and remove class on click

so this is my function for adding and removing but it only work for adding it doesnt remove on again click

(function ($) {
      $(".call-us-button .call").on("click", function () {
        $(this).parent().find(".phone-number").fadeIn();
        $(this).parent().find(".qr-code-call").fadeIn();
        $(this).parent().addClass("callBtnActive");
      });
    
      $(".call-us-button .call").on("click", function () {
        $(this).parent().find(".phone-number").fadeOut();
        $(this).parent().find(".qr-code-call").fadeOut();
        $(this).parent().removeClass("callBtnActive");
      });
    })(jQuery);

Upvotes: 1

Views: 83

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337713

You can achieve what you need in a single event handler by using the toggleClass() and fadeToggle() methods. In addition the code can be made more succint by chaining the methods and merging the class selectors.

(function($) {
  $(".call-us-button .call").on("click", function() {
    $(this).parent()
      .toggleClass("callBtnActive")
      .find(".phone-number, .qr-code-call").fadeToggle();
  });
})(jQuery);

As an aside, note that your code is wrapped in an IIFE, not a document.ready event handler. The two are not equivalent. It seems like your code is at least running so it's in the correct place in the DOM, but be aware this may not always be the case.

Upvotes: 1

Related Questions