title: Jquery toggle div with arrow animation fontawesome css
body: <p>I got a filter menu with a lot of DIVS. All with the same classes:</p>
  
  <pre><code>&lt;div class="filter-groep"&gt;
      &lt;h3 class="filter-title"&gt;Filter Title
          &lt;div class="tooltip-info"&gt;
              &lt;div class="tooltip-info-container"&gt;
                  Some tooltip information
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/h3&gt;
      &lt;div class="filter-content"&gt;
          Filter content
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried many different ways but most of them are not what I am looking for.</p>
  
  <p>I tried the JSfiddle of this post:
  <a href="https://stackoverflow.com/questions/23057720/toggle-up-and-down-arrows-in-a-simple-accordion-widget">Toggle up and down arrows in a simple accordion widget</a></p>
  
  <p><a href="http://jsfiddle.net/nandhakumarsri9/gu7h3/8/" rel="nofollow noreferrer">http://jsfiddle.net/nandhakumarsri9/gu7h3/8/</a></p>
  
  <p>But this is an accordion, so one div closes when other one opens. I want to open and close them seperatly and I want the arrows to animate on open and close.</p>
  
  <p>Also the arrows are done with some strange border CSS, I know you can do it with CSS and FontAwesome Icons.</p>
  
  <p>Anyone done this before?</p>