facebook style comment bar

Question

I am trying to create a comment box similar to facebook, where the text area expands and the comment button becomes visible when the text area is clicked and when the text area looses focus the comment button is hidden and the text area shrinks back to a smaller height. The following js works fine, but the problem is when I click the "comment_submit" button, it does not submit, rather the whole things just gets hidden.

How to not let the 'blur' event fire if it's the submit button is clicked? but let it fire otherwise?

$("#comment_body").focus(function() {
         $("#comment_tools").show();
         $("#comment_body").css("height", "100px")
       }).blur(function() {
         $("#comment_tools").hide();
         $("#comment_body").css("height", "25px")
       });

UPDATE

well this causes the comment buton to appear and then dissappear. I guess clicking on the textarea is also considered a click on the document? Anyway, the end result is that when the text area gets clicked nothing shows up but when it gets focus by tabbing into it, the comment button does show up.

how to exclude the text area from the document.click event? or is there a better way to do this?

 $("#comment_body").focus(function() {
         $("#comment_tools").show();
         $("#comment_body").css("height", "100px")
       });
       $(document).click(function() {
         $("#comment_tools").hide();
         $("#comment_body").css("height", "25px")
       });

Answer 1

Try binding to the document.click event rather than blur. Facebook doesn't do it on blur, since you can tab out to the Share button.

Its only when you click on the whitespace that the comment area collapses.