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

Answer 1

It's really just added some CSS to an element. You could create a class in your stylesheet:

.rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

And then just use toggle class to add/remove it.

This will not provide any animation. CSS3 transitions can even do that for you without requiring javascript to animate. Take a look at this, which has an JSFiddle demo if you want to try it.

Edit

Here's a demo on how to perform a CSS transition in both directions:

http://jsfiddle.net/jwhitted/NKTcL/

Answer 2

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');
});