jQuery addClass example

Change class name on click in jQuery

HTML

<div class="grid">
  <div class="grid-item"></div>
</div>

CSS

.grid-item {
  background-color: blue;
  color: white;
  height: 150px;
  width: 150px;
}

JavaScript

var counter = 0;

$('.grid').on( 'click', '.grid-item', function() {
  let direction = ++counter % 2 === 1 ? "-=100px" : "+=100px";
  $(this).animate({ "height": direction }, "slow" );
});