jQuery addClass example

Change class name on click in jQuery

by Dhanck

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<div id="nav-icon3">
<i class="fas fa-sort-amount-down"></i>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 410 448"><defs><style>.cls-1{fill:#333;}</style></defs><path class="cls-1" d="M67.78,96H432.22C444.8,96,455,88.84,455,80V48c0-8.84-10.2-16-22.78-16H67.78C55.2,32,45,39.16,45,48V80C45,88.84,55.2,96,67.78,96Z" transform="translate(-45 -32)"/><path class="cls-1" d="M45,208V176c0-8.84,10.2-16,22.78-16H341.11c12.58,0,22.78,7.16,22.78,16v32c0,8.84-10.2,16-22.78,16H67.78C55.2,224,45,216.84,45,208Z" transform="translate(-45 -32)"/><path class="cls-1" d="M45,464V432c0-8.84,10.2-16,22.78-16h91.11c12.58,0,22.78,7.16,22.78,16v32c0,8.84-10.2,16-22.78,16H67.78C55.2,480,45,472.84,45,464Z" transform="translate(-45 -32)"/><path class="cls-1" d="M45,336V304c0-8.84,10.2-16,22.78-16H250c12.58,0,22.78,7.16,22.78,16v32c0,8.84-10.2,16-22.78,16H67.78C55.2,352,45,344.84,45,336Z" transform="translate(-45 -32)"/></svg>
</div>

CSS

body{
  margin:10px;
  color:#333;
}
#nav-icon3{
  position: absolute;
  margin:20px;
  transform: scale(3);
  cursor:pointer;
}

svg{
  display:none;
  height:14px;
  width:14px;
  margin-bottom:1px;
}

JavaScript

var count = 0;
$('#nav-icon3').click(function(){
 count += 1;
	if (count == 1) {
      $('#nav-icon3 i').removeClass('fa-sort-amount-down')  
      $('#nav-icon3 i').addClass('fa-sort-amount-up')
    }
    if (count == 2) {
       $('#nav-icon3 i').removeClass('fa-sort-amount-up').hide()  
       $('#nav-icon3 svg').show()  
    }
    if (count == 3) {
      $('#nav-icon3 svg').hide()  
      $('#nav-icon3 i').addClass('fa-sort-amount-down').show()
    }
    if (count == 4) {
      $('#nav-icon3 i').removeClass('fa-sort-amount-down')  
      $('#nav-icon3 i').addClass('fa-sort-amount-up')  
      count = 1;
   
    }
})