jQuery .delegate(). Events not firing on second click
<p>On a new site I'm designing, I have a top div with a link in it. When that link is clicked, the div animates to the full height of the content. This works but I want a second click on that link to animate the div back to how it was before. This isn't working.</p>

<p>I am using jQuery 1.5.2, hence the use of .delegate() rather than .on(). Please don't suggest upgrading my jQuery version!</p>

<p><strong>jQuery</strong></p>

<pre><code>// top bar &amp; basket functionality
        var topbarContractedHeight = $('#topbar').height(); // get current height
        $('#topbar').css('height','auto'); // temp. set height to auto...
        var topbarExpandedHeight = $('#topbar').height(); // ...and store it
        $('#topbar').css('height',topbarContractedHeight); // put the height back to how it was

        $('.topbarcontracted').delegate('#basket_trigger', 'click', function(){
            $('#topbar').animate({ height: topbarExpandedHeight }, 500).removeClass('topbarcontracted').addClass('topbarexpanded'); // ...animate the height to the expanded height stored earlier, remove the 'contracted' class and add 'expanded'...
            return false; // ...and don't process the link
        });

        $('.topbarexpanded').delegate('#basket_trigger', 'click', function(){
            $('#topbar').animate({ height: topbarContractedHeight }, 500).removeClass('topbarexpanded').addClass('topbarcontracted'); // ...animate the height to the expanded height stored earlier, remove the 'expanded' class and add 'contracted'...
            return false; // ...and don't process the link
        });
</code></pre>

<p>How can I get that 2nd .delegate() event to fire?</p>

<p>Please test to your heart's content at <a href="http://jsfiddle.net/4KL2z/1/" rel="nofollow">http://jsfiddle.net/4KL2z/1/</a></p>
