Toggle FontAwesome Carets on Click with jQuery

Question

FontAwesome doesn't seem to be loading in the snippets here so please see this JSFiddle:

What I'm trying to do is initially show the <i class="fas fa-caret-down"></i> on the right side of the div, then switch to show the <i class="fas fa-caret-up"></i> after clicking on the product-suggestion-form-container div. They should switch back and forth between up and down every time you click on the div.

What am I misunderstanding about toggling between active and inactive classes in jQuery?

If I add the active and inactive classes like this to the CSS:

https://jsfiddle.net/c12tvgdj/

nothing shows at all.

Relevant HTML:

<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="product-suggestion-form-container">
  <span class="form-title">Product Suggestion Form</span>
  <span class="dropdown-arrow-top inactive-1"><i class="fas fa-caret-down"></i>
  <span class="dropdown-arrow-up-top active-2"><i class="fas fa-caret-up"></i>
  </span>
</div>

CSS

/*before toggle*/

.product-suggestion-form-container {
  border: 1px solid #c6c6c6;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  background-color: #f8f7f7;
  cursor: pointer;
}

.dropdown-arrow-top {
  display: block;
}

.dropdown-arrow-up-top {
  display: none;
}

/*after toggle*/

.dropdown-arrow-top.inactive-1 {
  /*display: none;*/
}

.dropdown-arrow-up-top.active-1 {
  /*display: block;*/
}

Javascript:

$(document).ready(function(){
   $(".product-suggestion-form-container").click(function(){
      $(".form-div-top").slideToggle();
      $(".dropdown-arrow-top").toggleClass("inactive-1");
      $(".dropdown-arrow-up-top").toggleClass("active-1");
   })
});

@sergeykuznetsov I just got that straight from here: https://stackoverflow.com/questions/10113366/load-jquery-with-javascript-and-use-jquery but good point — HappyHands31, Dec 13 '20 at 00:24
The question you contacted is 9 years old. At that time, the version 1.11.1 was relevant. Now you need to change the jquery version to the new one - 3.3.1. `` — s.kuznetsov, Dec 13 '20 at 00:29

pawel · Accepted Answer · 2020-12-13T00:37:53.207

There are few minor typos in your examples:

In https://jsfiddle.net/e74coz3f/ active-2 is used instead of active-1
In https://jsfiddle.net/c12tvgdj/ second span is not closed and the above problem also exists

Also, jQuery is not correctly installed and I get Uncaught ReferenceError: $ is not defined in JSFiddle console.

Lastly, I think this could be implemented in few simpler ways, e.g. https://jsfiddle.net/c7hwv0a6/1/ or https://jsfiddle.net/a18ju6bv/.

Toggle FontAwesome Carets on Click with jQuery

1 Answers1