Rotate Image(s) OnClick With jQuery?

Question

I have this code: http://jsfiddle.net/Q4PUw/2/

Hence, a simple HIDDEN TO VISIBLE jQuery Script.

What I want to know how to do is have an image in the "expand-one" Class that would rotate 90 Degrees so the image would be facing down while that CLASS is VISIBLE, then once it becomes HIDDEN it would rotate back to it's original spot.

Any idea(s) anyone?

Thank you so much! Aaron

Answer 1

You could do this with css: http://jsfiddle.net/Tentonaxe/Q4PUw/6/

$('.expand-one').toggle(function() {
    $('.content-one').slideDown('slow');
    $(this).find("img").css({
        "-webkit-transform": "rotate(180deg)",
        "-moz-transform": "rotate(180deg)",
        "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"
    });
}, function() {
    $('.content-one').slideUp('slow');
    $(this).find("img").css({
        "-webkit-transform": "rotate(0deg)",
        "-moz-transform": "rotate(0deg)",
        "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
    });
});