title: Toggle icon back "i" element to original position when clicking on another toggle div
body: <p>I'm trying to do an accordion with the clickable toggle that opens the content, and toggle the icon, i was able to change the content slider on click and once any other content is clicked to get back to the original one, and to toggle the icon on click but not when i click on another toggle to open.
  what I'm trying to do is to toggle back the icon to its original position, can you help me out with the function,</p>
  
  <p>thanks</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="accordion"&gt;   
  
      &lt;p class="accordion-toggle"&gt;
          &lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;
          &lt;strong&gt;title&lt;/strong&gt;
      &lt;/p&gt;
  
      &lt;div class="accordion-content"&gt;
          &lt;p&gt;content&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>      $(document).ready(function($) {
          $('#accordion').find('.accordion-toggle').click(function(){
  
            //Expand or collapse this panel
            $(this).next().slideToggle('slow');
  
            //Hide the other panels
            $(".accordion-content").not($(this).next()).slideUp('slow');
  
          //Toggle icon
          $(this).find('i').toggleClass('fa-angle-right fa-angle-down');
  
          });
  
        });
  </code></pre>