Question

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.

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

jQuery

// top bar & 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
        });

How can I get that 2nd .delegate() event to fire?

Please test to your heart’s content at http://jsfiddle.net/4KL2z/1/

Answer 1

It’s quite simple really, instead of using a second delegate, use an if() statement like so:

 $('.topbarcontracted').delegate('#basket_trigger', 'click', function(){
   if ($('#topbar').hasClass('topbarcontracted')) {
     $('#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'...
   } else {
     $('#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
 });

and the JSfiddle link: http://jsfiddle.net/4KL2z/2/