Expand and collapse icon problems on slideToggle in jQuery

I am implementing a tree view with jQuery.

I use slideToggle() to expand-collapse sub trees and change the image showing its status(expand or collapse) in slideToggle method as a function and by using what Nick learn me at this question:

is there a toggleSrc method in jQuery?

but its image changing is not natural. I mean it show开发者_StackOverflow社区s collapse image when sub tree opens completely and shows expand image when sub tree closes completely. The expand changing is natural but the collapse not. I mean the collapse image should be shown when sub tree start to collapse not after it complete it.

Hope I could describe my mean clearly.

Is it possible to do what I mean?

Thank you in advance.

why don't you share what you got so far? anyway, you are toggling the images in the callback of slideToggle? which means after the animation..try to toggle it before the slideToggle, but this will also shows the expand image at the start of the animation.

What u r asking for is possible but requires you to write a condition

if(obj.is(':visible')) { // the sub-tree is expanded
    $img.toggleSrc(); // show image then toggle
    obj.slideToggle(function() {
        // your code WITHOUT toggleSrc
    });
} else {
    obj.slideToggle(function() {
        // your code WITH toggleSrc
    });
}