title: rotate FontAwesome "arrow" icon when the accordion is active
body: <p>Adding some Icons to my accordion that should rotate upon the accordion being active. They need to point DOWN when acive, and point to the RIGHT when closed. </p>
  
  <p>Creating the Accordion is done with the jQuery's accordion feature.</p>
  
  <p>I used a FontAwesome arrow. Managed to add the rotation aspect of it with no issue, but I ran into 2 further issues:</p>
  
  <ol>
  <li>I can make the arrow clickable + it will rotate, but it wont rotate if i click the Accordion-box itself</li>
  <li>Change the <code>(".rotate")</code> to <code>("#accordion")</code>, but then all the arrows change, even header/box is active and the 2nd one isn't.</li>
  </ol>
  
  <p>At first I used the following CSS:</p>
  
  <pre><code>.ui-accordion-icons .ui-icon::before{
      content: "▶";
  }
  
  .ui-accordion-header-active .ui-icon::before{
      content: "▼";
  }
  
  </code></pre>
  
  <p>to add the icons as "content" to the accordion, and switching works fine, but i couldnt get an animation to work with it.</p>
  
  <p>So i started to change it up, and try to get it working with jQuery.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
      //accordion
      $("#accordion").accordion({
          heightStyle: "content",
          active: false,
          collapsible: true,
      });
      
      $(".rotate").click(function(){
      if ($("#accordion").accordion("option", "active")) {
        $(".rotate").toggleClass("down"); 
      }
      })
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#accordion {
      padding-top: 100px;
  }
  
  #accordion h3 {
      font-size: 24px;
      font-weight: bold;
      padding-left: 20px;
  }
  
  .ui-accordion-header {
      border: 1px solid grey;
      padding: 10px 20px;
  }
  
  .ui-accordion-content {
      padding: 10px 20px;
  }
  
  .ui-accordion-header-active {
      color: blue;
      border: 1px solid blue;
  }
  
  .arrow {
      margin-right: 20px;
  }
  
  .rotate{
      -moz-transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
  }
  
  .rotate.down{
      -moz-transform:rotate(90deg);
      -webkit-transform:rotate(90deg);
      transform:rotate(90def);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"&gt;
  
   &lt;div id="accordion"&gt;
       &lt;h3&gt; &lt;i class="fas fa-caret-right rotate arrow"&gt;&lt;/i&gt; Section 1 &lt;/h3&gt;
       
       &lt;div&gt;
           &lt;p&gt;
              Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque 
              lobortis. Phasellus pellentesque purus in massa. Aenean.
             &lt;/p&gt;
        &lt;/div&gt;  
        
        &lt;h3&gt;&lt;i class="fas fa-caret-right rotate arrow"&gt;&lt;/i&gt; Section 2 &lt;/h3&gt;
         
        &lt;div&gt;
          &lt;p&gt;
            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque 
            lobortis. Phasellus pellentesque purus in massa. Aenean in pede.
          &lt;/p&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there still a way to animate with the <code>content</code> (basically rotating from pointing right to pointing down)? if not, how can i fix the jQuery code for the FontAwesome stuff to get to work properly when an accordion-tab is active and when it's not?</p>