Toggle the source of an image.

[Fire Cat]

Heya guys. It's been a while since I've been here

So, I recently discovered the awesomeness of jQuery, and decided to use it.
I'm currently using the slideToggle() to toggle my div nicely.
The thing is, I also want to have a small icon to change according to wether the div is visible or not.

Here's my HTML:

<div class="box">
   <!-- Content of this box will come later -->
</div>		
<div class="header" onClick="toggle();">
	<h1>ImageCloud</h1>
	<img src="images/plus.png" class="icon" alt="" />
</div>	

Pretty simple. Now, when I click on the header bar (header), it toggles the div "box" into view. No problem there.
Now, I want to have the src of the image "icon" to toggle as well.

My JS:

function toggle(){
	$('.box').slideToggle("fast");
}

I've tried quite a few things, but none seem to work.
Note that it doesn't need to be jQuery - but it's so awesome you'll probably need to use it anyway

Thanks!
FC

[BIOSTALL]

What about something like so:

function toggle(){
    $('.box').slideToggle("fast", function() { // add callback for once the toggle has occured
        if ($('.box').css("display")=="block") { // is the div showing?
            $(".icon").attr("src", "images/minus.png");
        }else{ // is the div hidden?
            $(".icon").attr("src", "images/plus.png");
        }
    });
}

I haven't tested this but should point you in the right direction. Let us know how you get on

[jadhav.soma]

Good post ..it's helpfull to me..