When I click on 'arrow' icon, it toggles between classes 'up' and 'down', but since there are a lot of 'arrow' icons, when I click on another one, I would like the previous one to lose the class 'up'(if it has one) before adding it to the clicked 'arrow'. My JQUERY code seems to work fine except for this case scenario:
[enter image description here](https://i.stack.imgur.com/dqtLj.png)

\*click arrow ('up' class is added)

\*click another arrow ('down' class added to previous, 'up' added to clicked arrow)

\*click another arrow ('down' class added to previous, the clicked arrow disappears)

My code:

```
$('.accordion').click(function() {
  if($(this).find('i').hasClass('fa-angle-down')){
      $('i').addClass('fa-angle-down');
      $(this).find('i').toggleClass('fa-angle-down fa-angle-up');
} else {
  $(this).find('i').toggleClass('fa-angle-up fa-angle-down');
}
});  

```

Any logic flaws in my function code.?