Question

Why does this code attempt to hide the div but then show it again? using firefox

$(document).ready(function(){

    $("#tool1").click(function(){
       if($('#status').height() > 100){
           $('#status').css('height','50px').show();
       }    
    });

});

Thanks for the help so far they all worked. However this is the exact code I have
DEMO

Answer 1

$("#tool1").click(function(){
   if($('#status').height() > 100){
     $('#status').hide(500, function() {  // hide the div
        $(this)
             .css('height','50px')  // change the height
             .show(500); // then show again
     });
   }    
});

DEMO

According to above comment

$("#tool1").click(function(){
   var orig = $('#status').height(),
       target = orig == 250 ? 50 : 250;
       $('#status').animate({
           height: target      
       },1000);  
});

DEMO

According to below comment

• Button is inside #status

Button inside demo

According to your demo

Change you code like:

$(document).ready(function() {
    $("#tool1").click(function(e) {
        e.preventDefault(); // preventDefault() for pare reload
        var $statusDiv = $('#status');
        if ($statusDiv.height() > 100) {
            $statusDiv.height(50);
        }
        else {
            $statusDiv.height(250);
        }
    });
});

DEMO

Note

You can also remove href from #tool1

Currently #tool1 is link tag, if you want to use a button, than just remove e.preventDefault() from above code.