Question

How can I get this to change the image onClick? And then change it back to it’s original state (original image)?

jQuery('.expand-one').click(function(){
    jQuery('.content-one').slideToggle('fast');
});

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

Virtually I want to change the out the IMAGE ROTATION for the IMAGE SWAPPING.

Thanks,
Aaron

Answer 1

Change the image tag to

<img class="expand-one" src="WhateverUrl" data-altsrc="AlternateUrl">

and have the javascript as

jQuery('.expand-one').click(function(){
    var src = $(this).attr("src");
    $(this).attr("src", $(this).data("altsrc"));
    $(this).data("altsrc", src);
});

Demo