Убрать класс active в jQuery

$('.ti-main-item').click(function() { 
  $(this).toggleClass('active'); 
  var $content = $(this).find(".tog-inf-content"); 
  if ($content.is(":visible")) { 
   $content.slideUp(); 
  } else { 
    $content.slideToggle(); 
  } 
});

.ti-main-item .tog-inf-content { 
  display: none; 
} 
 
.ti-main-item .fa-long-arrow-down { 
  display: inline-block; 
  transition: transform 0.5s ease; 
} 
 
.ti-main-item.active .fa-long-arrow-down { 
  transform: rotate(-180deg); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div class="ti-main-item"> 
  <a href="#" class="tog-inf-nav"> 
    <span class="ti-head">Итем1</span> 
    <span class="ti-arrow"><i class="fa fa-long-arrow-down"></i></span> 
  </a> 
  <div class="tog-inf-content"> 
    <ul> 
      <li><a href="#">Описание</a></li> 
      <li><a href="#">Описание</a></li> 
      <li><a href="#">Описание</a></li> 
      <li><a href="#">Описание</a></li> 
    </ul> 
  </div> 
</div> 
 
<div class="ti-main-item"> 
  <a href="#" class="tog-inf-nav"> 
    <span class="ti-head">Итем2</span> 
    <span class="ti-arrow"><i class="fa fa-long-arrow-down"></i></span> 
  </a> 
  <div class="tog-inf-content"> 
    <ul> 
      <li><a href="#">Описание</a></li> 
      <li><a href="#">Описание</a></li> 
      <li><a href="#">Описание</a></li> 
      <li><a href="#">Описание</a></li> 
    </ul> 
  </div> 
</div>