jQuery toggleClass example

Toggle class name on click in jQuery

by voxman90

HTML

<div class="container">
  <div class='item1'></div>
  <div class='item2 active'></div>
</div>

CSS

body {
  background: #20262E;
  padding: 80px;
  font-family: Helvetica;
}

.container {
  position: relative;
  width: 600px;
  height: 70px;
  background: rgb(100, 100, 100);
  font-size: 50px;
  margin-bottom: 30px; 
}

.item1, .item2 {
  display: none;
  width: 70px;
  height: 70px;
  background: white;
  transition: transform 1s ease;
}

.item2 {
  background: green;
}

.next {
  display: block;
  position: absolute;
  top: 0;
}

.next {
  transform: translateX(100%);
}

.next.left {
  transform: translateX(0);
}

.active.left{
  transform: translateX(-100%);
}

.active {
  display: block;
}

JavaScript

$('.container').on("click", (event) => {
	$('.container .item1').addClass('next');
  setTimeout(() => {
  	$('.container .item1').addClass('left');
    $('.container .item2').addClass('left')
   }, 0)
  $('.item1').one('transitionend', () => {
  	$('.item1').removeClass('next left').addClass('active');
  });
  $('.item2').one('transitionend', () => {
  	$('.item2').removeClass('active left');
  })
})