JSFiddle - React, Tailwind, and code Playground

by Paolo Basso

HTML

<button class="btn">
Button
</button>

<div class="example"></div>

CSS

.example {
  width:200px;
  height:200px;
  background-color:blue;
}

.red {
  background-color:red;
}

JavaScript

(function( $ ){
   $.fn.classToggler = function(classToCheck, classToAddOrRemove) {
      if ($(this).hasClass(classToCheck)) {
    $(this).removeClass(classToAddOrRemove);
  } else {
    $(this).addClass(classToAddOrRemove);
  }
   }; 
})( jQuery );

$(".btn").click(function(e) {
  e.preventDefault();
  $('.example').classToggler("red", "red");
});

/* $(".btn").click(function(e) {
  e.preventDefault();
  if ($('.example').hasClass("red")) {
    $('.example').removeClass("red");
  } else {
    $('.example').addClass("red");
  }
}); */