jQuery - .toggle() triggering on page load -

When I click on the word directory, then the up arrow image should be changed below, and in return clicked in should go.

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

  $ ('# direct'). Click (function () {$ ('# arrow') .attr ('src', 'images / down_arrow_black.gif');}); & Lt; Div id = "direct" & gt; & Lt; Img src = "image / up_arrow_black.gif" id = "arrow" / & gt; Directory & lt; / Div & gt;  

Thanks Gene

I toggle work For and for the method to properly load $ () :

  $ (function () {$ ('#direct'). Toggle ( function () {$ ( '# arrow'). Attr ( 'src', 'images / down_arrow_black.gif');}, function () {$ ( '# arrow'). Attr ( 'src', 'images / Up_arrow_black.gif ');})}}};