Question

When I click on the word Directory, the up arrow image must change to down, and vice-versa when clicked again.

In this code, when the page loads, toggle is triggered.

$('#direct').click(function(){
     $('#arrow').attr('src','images/down_arrow_black.gif');
});


<div id="direct"><img src="images/up_arrow_black.gif" id="arrow" />Directory</div>

Thanks
Jean

Answer 1

I’d use the .toggle() method to make the toggle work, and $() to be sure it loads correctly:

$(function() {
    $('#direct').toggle(function(){
        $('#arrow').attr('src','images/down_arrow_black.gif');
    }, function() {
        $('#arrow').attr('src','images/up_arrow_black.gif');
    });
});