jQuery return false weird behavior

Question

I have a piece of jQuery code that toggles a description paragraph for a given td when users click on an anchor tag, see code below. My problem is that if I put the return false statement as shown, the code works fine in IE but in FF it would not show the description at all, which is expected. When I put the return false after the toggling it works fine in FF but in IE it would show the description and then hides it right away. Is there any way to get it to work properly in both??

Thanks in advance.

$(".name").click(function(){
    return false;
    $(this).parent()
           .parent()
           .find(".description")
           .animate({ opacity: "toggle", "slow");

});

Answer 1

Try:

return !($.browser.msie);

Sorry...I messed up on which needed to be true, and which needed to be false.

Answer 2

Rather than trying to return false from your click event, why not just replace the HREF attribute with something else?

$(".name").attr("href", "javascript:;")
    .click(function()  {
        //..etc...
    });

Answer 3

Without knowing what your markup looks like it's hard to tell, but I suspect that the handler may be applied to more than one level of element. It could be that in IE the second handler is re-toggling the visibility. You might want to try stopping event propagation and/or making sure that your selector applies only to the anchor elements.

$("a.name").click(function(e){
    e.stopPropagation();
    $(this).parent()
           .parent()
           .find(".description")
           .animate({ opacity: "toggle", "slow");
    return false;
});