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

Answer 2

You can do that with plain HTML (it doesnt have ultra slow fading):

<details>
<summary>Click Here To Display The Content</summary>
Hidden Content here, can be rotated with CSS3
</details>