How can I toggle the images for this expand/collapse button using jQuery?

Question

I want to be able to expand/collapse a menu, I can do that, but by clicking the button, and the button image should change based on the state of the collapsed menu.

Here's the code I was trying, but I can't seem to get it to work like I wanted.

$(document).ready(function() {
    $('#toggle1').click(function() {
        $('#collapse1').slideToggle(400);   
        if (visible) {
            $('#toggle2').attr('src', 'media/collapse.png');
        }
        else {
            $('#toggle2').attr('src', 'media/expand.png');
        }
    });
    $('#toggle2').click(function() {
        $('#collapse2').slideToggle(400);
        if (visible) {
            $('#toggle2').attr('src', 'media/collapse.png');
        }
        else {
            $('#toggle2').attr('src', 'media/expand.png');
        }       
    });
});

Could anyone offer some advice?

Answer 1

This is an example I created for another question similar to this in here. check that: http://jsfiddle.net/wFQ7U/