slideToggle with pseudo arrow

Question

I am working with a script that open and closes a div, but what I am trying to work out is how to add (and toggle) the fontawesome open/close arrow icons to the .reveal class. I like the idea of using the pseudo element, but my limited knowledge of javascript is proving difficult.

Can anyone offer any guidance?

$(document).ready(function() {
    $('.reveal').click(function() {
        $(this).prev('div').slideToggle();
    });

    $('.unreveal').click(function() {
        $(this).parent().slideUp();
    });
});



    <div class="slidingDiv">
       <p>content goes here</p>   
    </div>  
    <a class="reveal" href="#">Open / Close</a>

Answer 1

You can use toggleClass:

 $(document).ready(function() {
     $('.reveal').click(function() {
       $(this).prev('div').slideToggle();
       $(".reveal i").toggleClass("fa-arrow-up fa-arrow-down");
  });


});

Fiddle http://jsfiddle.net/t6cfwLcq/1/ of course you can choose whatever fonts icons you want