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

Question

I would like to change the src of an img when the parent of listed children is clicked. I am using some code I have been working with that I found on StackOverflow because I was having problems with slideup and slidedown.

Next to each uppermost item (parent), to the left will be an arrow icon pointing to the right. Upon clicking the icon, this image should change to an arrow pointing down.

I can get the image to change onClick, but unless you click on the image, the image does not change back. Therefore, I believe I need the change to be pegged to the slideup and slide down functions. The image should also change back if you click on the close link or when clicking on a new Parent.

I can live without the 'only one list can be shown at a time' functionality, which would eliminate the need for the image to also change on clicking a new parent.

For this fiddle, I have only applied what I was trying to do to the first parent of the 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);
    }
});

Answer 1

I updated your jsfiddle: http://jsfiddle.net/9aa5n/53/

Since you didn't provide absolute paths to images, I added some from the net.

I removed your click event, and replaced it with this, I believe your issue was how you were referencing the 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 get you started to finish polishing up the UI, i.e. closing all .edit_button and then open only the $(this).find("img").first() element ...