Rotate image on toggle with jQuery

Question

Site in question: http://mtthwbsh.com

I'm attempting to create a collapsable nav where when toggled, the arrow points up (and down when hidden).

I've been reading up on rotating images with jQuery, and have found this to be my best resource: Rotate Image(s) OnClick With jQuery?

I understand what's happening here, but am having a tough time visualizing it with my markup. My jQuery for my collapsing nav is as follows:

<script type="text/javascript">
$(document).ready(function(){
/* toggle nav */
$("#menu-icon").on("click", function(){
    $(".nav").slideToggle();
    $(this).toggleClass("active");
  });
 });
</script>

I was wondering if anyone could help explain how I might translate that sort of functionality to my plugin?

Answer 1

Check this, maybe can help somebody http://jsfiddle.net/gkmagvo3/515/

<a class="arrow" href="#">        
    <img class="arrow-img rotate-reset" src="img.png" />        
</a>

Some css:

.rotate {
    transform: rotate(-180deg);
    /*transform: rotate(180deg);*/
    transition: .3s;
}
.rotate-reset {
    transform: rotate(0deg);
    transition: .3s;
}

And javascript:

$('.arrow').on("click", function (event) {
    $('.arrow-img').toggleClass('rotate');
    $('.arrow-img').toggleClass('rotate-reset');
});