jQuery - .toggle() triggering on page load

Question

Hello,

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

if your jQuery wrapped in the following?

$(document).ready(function() {
    ....
})

Answer 2

Wrap it in

$(document).ready(function() {
    // your toggle code
});

Answer 3

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');
    });
});

Answer 4

if you are using jQuery 1.4

you can do it this way...

$('#direct').click(function(){
   $('#arrow').attr('src',function(i,src){            
        return src.indexOf('down')?'images/up_arrow_black.gif':'images/down_arrow_black.gif';
   });
});