jquery - How to make an image change when a .slideToggle() go up and down -

my code website doesn't work here link fiddle:

note jsfiddle updated needs help...

jsfiddle

if click image changes doesn't change back... line 39 adds image:

$("#sel" + i).prepend("<img id='ico" + + "' src='https://dl.dropbox.com/s/5z6muxkoq2ort9l/arrowside.png' width='24' height='24' /> "); 

you binding click events elements before exist. either move loop above event bind statements, or group them in function can call after rest of script runs. see example: http://jsfiddle.net/tpchp/

function bindclicks() {     $("#ico1").click(function()     {        //rest of code here     }     //more click binding fun }  (var = 1; < recipes.length + 1; i++)     {         $("#sel" + i).attr("data-hidden", i);         $("#sel" + i).prepend("<img id='ico" + + "' src='https://dl.dropbox.com/s/5z6muxkoq2ort9l/arrowside.png' width='24' height='24' /> ");         $("#ico" + i).attr("data-hidden", i);                 }  bindclicks(); 

you had bug on line 12 of jsfiddle causing javascript not run. notice apostrophe @ end of line

$('.info:not(#res' + hiddenid + ')').slideup();' 

to fix toggle issue, try testing see if element hidden before calling slidetoggle (as mid transition): http://jsfiddle.net/ypac9/

$("#ico1").click(function()     {                 var hiddenid = $(this).data('hidden');         if ($("#res" + hiddenid).is(":visible"))         {             $(this).attr("src", "https://dl.dropbox.com/s/5z6muxkoq2ort9l/arrowside.png");         }         else         {             $(this).attr("src", "https://dl.dropbox.com/s/hf4i6ww9xvemlc4/arrowdown.png");         }          $('#res' + hiddenid).slidetoggle();         $('.info:not(#res' + hiddenid + ')').slideup();      });