title: Toggle up and down arrows in a simple accordion widget
body: <p>I have followed few tutorials and then created a simple accordion widget, it works fine as you can see in this <a href="http://jsfiddle.net/gu7h3/2" rel="noreferrer">fiddle</a></p>
  
  <p>However, I am trying to add a downward arrow when the section is closed and an upper arrow when the section is open - at the right end of the head of each tab in the accordion, just as the image below shows:</p>
  
  <p><img src="https://i.stack.imgur.com/IpGSz.png" alt="enter image description here">
  Here is the arrows font codes: </p>
  
  <pre><code>.icon-arrowUp:before {
     content: "\f077";
  }
  .icon-arrowDown:before {
     content: "\f078";
  }
  </code></pre>
  
  <p>Here is what I have tried, I added the downward arrow by default using CSS:</p>
  
  <pre><code>.accordian .accordian-head:before {
          font-family: 'icons';
          content: "\f078";
          float: right;
      }
  </code></pre>
  
  <p>This added the arrow nicely, however now I want it to replace that arrow with the upward one when the section is open, I have no clue what to do! I tried to add the following CSS and toggle it with JavaScript, but it didn't work:</p>
  
  <pre><code>.accordian .accordian-head .accordian-head-active:before {
          font-family: 'icons';
          content: "\f077";
          background-color: red;
      }
  
  
  //Accordian
      $('.accordion').each(function () {
          var $accordian = $(this);
          $accordian.find('.accordion-head').on('click', function () {
              $accordian.find('.accordion-body').slideUp();
              if (!$(this).next().is(':visible')) {
                  $(this).next().slideDown();
                  $(this).addClass('accordian-head-active');
              }
          });
      });
  </code></pre>