javascript - How to change image with onclick while a list is using slideup and slidedown -

i change src of img when parent of listed children clicked. using code have been working found on stackoverflow because having problems slideup , slidedown.

next each uppermost item (parent), left arrow icon pointing right. upon clicking icon, image should change arrow pointing down.

i can image change onclick, unless click on image, image not change back. therefore, believe need change pegged slideup , slide down functions. image should change if click on close link or when clicking on new parent.

i can live without 'only 1 list can shown @ time' functionality, eliminate need image change on clicking new parent.

for fiddle, have applied trying first parent of list: http://jsfiddle.net/9aa5n/51/

html:

    <li><a href="javascript:void(0);" class="edit_button edit_this" id="1"><img src="arrowright.png"></a></li>   <li class="show_hide" id="1c"> <p>lkjlkjasdfasdf</p> <a href="javascript:void(0);"  id="1close" class="close cancel_btn">close</a> </li>  <li><a href="javascript:void(0);" class="edit_button edit_this" id="2">edit</a></li> <li class="show_hide" id="2c"> <p>lkjlkjasdfasdf</p> <a href="javascript:void(0);"  id="2close" class="close cancel_btn">close</a> </li>  <li><a href="javascript:void(0);" class="edit_button edit_this" id="3">edit</a></li> <li class="show_hide" id="3c"> <p>lkjlkjasdfasdf</p> <a href="javascript:void(0);"  id="3close" class="close cancel_btn">close</a> </li> 

jquery / javascript:

    $(document).ready(function() {         $('.show_hide').slideup(0);         $('.edit_this').click(function() {             $('.show_hide').slideup(300);             var takeid = $(this).attr('id');             $('#' + takeid + 'c').slidedown(300);           });         $('.close').click(function() {             var takeid = $(this).attr('id').replace('close', '');             $('#' + takeid + 'c').slideup(300);         });     });  $('#img-tag').on({     'click': function() {                      var src = ($(this).attr('src') === 'arrowright.png')             ? 'arrowdown.png'             : 'arrowright.png';          $(this).attr('src', src);     } }); 

i updated jsfiddle: http://jsfiddle.net/9aa5n/53/

since didn't provide absolute paths images, added net.

i removed click event, , replaced this, believe issue how referencing elements in jquery.

$(".edit_button").click(function() {     var img = $(this).find("img").first();     console.log(img.attr("src"));     if (img.attr("src") === 'http://iconizer.net/files/brightmix/orig/monotone_arrow_right.png') {             img.attr("src", 'http://png-3.findicons.com/files/icons/2315/default_icon/256/arrow_down.png');             console.log(img.attr("src"));     } else {         img.attr("src", 'http://iconizer.net/files/brightmix/orig/monotone_arrow_right.png');          console.log(img.attr("src"));     } }); 

this should started finish polishing ui, i.e. closing .edit_button , open $(this).find("img").first() element ...