Jquery element replace problem
<p>First I'm not sure this is the place to ask this question if not please direct it to its proper place. </p>

<p>The problem I am having is that I can get the first click function to work and have the html element change but I can't get the second click function to work and have the element change back. I was wondering how can I fix this problem?</p>

<p>Here is the code.</p>

<pre><code>$(document).ready(function() {
    $('.arrow').click(function(){
        $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear');
        $(this).html('&lt;span class="arrow-alt"&gt;&amp;#8595;&lt;/span&gt;');
    });

    $('.arrow-alt').click(function(){
        $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear');
        $(this).html('&lt;span class="arrow"&gt;&amp;#8594;&lt;/span&gt;');
    }); 

});
</code></pre>
