Question

I have a jsFiddle setup to where you will be able to click on the image to the left and when you do it changes the image, but when you click on the DIV as an entirety (expand-one) it does not swap the image out.

I want to be able to click on a DIV (as a whole) and swap out an image that is within the DIV without having only being able to click on just the image.

You can view what I mean here:
http://jsfiddle.net/5PDV5/1/

Thank you all! 🙂

Answer 1

All you need to do is inside the click handler for the div change the image’s src.

jQuery('.expand-one').click(function(){
        jQuery('.content-one').slideToggle('fast');
        var img = $(this).find('img'),
            src = img.attr("src")
            alt = img.data("altsrc");
            img.attr("src",alt).data("altsrc",src);
    });
    jQuery('.expand-one').toggle(function() {
        jQuery('.content-one').slideDown('fast');
        }, function() {
        jQuery('.content-one').slideUp('fast');
    });

Also a more efficient method would be to use classes and background images so the code would read like:

HTML

<div class="expand-one blue-icon"></div>

CSS

.expand-one { margin-left: 5px } /* Margin of Icon Size */
.blue-icon { background-image: url('blue-icon.png'); }
.green-icon { background-image: url('green-icon.png'); }

JS

//This turns one off and the other on
$(this).toggleClass('blue-icon green-icon');