5

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

Aaron Brewer
  • 3,567
  • 18
  • 48
  • 78

2 Answers2

3

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)"
    });
});
Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • 1
    in that fiddle, the image is no longer in expand-one. – Kevin B Dec 13 '11 at 20:40
  • 1
    Here's the updated fiddle with the dom in your latest fiddle: http://jsfiddle.net/Tentonaxe/Q4PUw/8/ – Kevin B Dec 13 '11 at 20:41
  • 1
    Thanks, now I'm trying to get an animation effect for the rotation. I knew you were going to be right =). I've noticed you on SO recently and your answers always seem to be spot on. – mrtsherman Dec 13 '11 at 20:45
  • @KevinB: Thank you so much! :), I thank you for the jsFiddle Version 8 code, but 6 is all I need sir! :) – Aaron Brewer Dec 13 '11 at 20:55
  • Okay, I got what I wanted. Ugly. But did it for curiosity's sake. http://jsfiddle.net/Q4PUw/11/ Doesn't appear to be a native jQuery or CSS means of doing this. – mrtsherman Dec 13 '11 at 21:03
  • For rotation, I would use css3 transforms, however that means the rotation wont happen in IE 6 7 and 8. If that is acceptable, checkout my fiddle. http://jsfiddle.net/Tentonaxe/Q4PUw/12/ PS: Thanks for the excuse to learn some css3 transitions! – Kevin B Dec 13 '11 at 21:18
  • You won't see a native way in jquery to do it for a while until all A-Grade supported browsers support css3 transitions or we (the jquery commumity) can find a way to add backward-compatibility for IE. – Kevin B Dec 13 '11 at 21:24
  • Here's my fiddle updated using the html from your last posted fiddle http://jsfiddle.net/Tentonaxe/Q4PUw/13/ – Kevin B Dec 13 '11 at 21:28
1

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>
juancarlospaco
  • 164
  • 3