jQuery: How do I apply .blur to *every* child element of a div, rather than *any* child element of a div?

Question

Hi all,

I'm creating a Facebook-style "What's on your mind?" toggling input box. The way that I'm approaching it is a click and blur combination. Clicking an input box will auto-expand the container div and display a number of elements. This works fine. However, I have had trouble making it so that when the focus leaves every child element of the container div, it would return it is toggled-off (smaller div and hidden child elements) state.

If I just do "#container-div > *", for the .blur, the .blur will be triggered any time any child element loses focus, rather than when every child element loses focus (the focus is no longer on any child element of the container div). I've tried changing $("#create-community > *").blur to $(" * ").not("#create-community > *").blur , but that doesn't work either.

Any suggestions?

$("#create > *").click(function() {
  $(".expand").addClass("expand-expand");
  $(".expand-expand").removeClass("expand");
  $("#create").addClass("create-expand");
  $("#create").removeClass("create");
  $(".write-title").addClass("write-title-expand");
  $(".write-title-expand").removeClass("write-title");
  $(".summary").addClass("summary-expand");
  $(".summary-expand").removeClass("summary");
  $(".input").addClass("input-expand");
  $(".input-expand").removeClass("input");
  $(".submit").addClass("submit-expand");
  $(".submit-expand").removeClass("submit");
  $(".name").attr("value", "");
 });

 $("#create > *").blur(function() {
  $(".expand-expand").addClass("expand");
  $(".expand").removeClass("expand-expand");
  $("#create").addClass("create");
  $("#create").removeClass("create-expand");
  $(".write-title-expand").addClass("write-title");
  $(".write-title").removeClass("write-title-expand");
  $(".summary-expand").addClass("summary");
  $(".summary").removeClass("summary-expand");
  $(".input-expand").addClass("input");
  $(".input").removeClass("input-expand");
  $(".submit-expand").addClass("submit");
  $(".submit").removeClass("submit-expand");
  $("#name").attr("value", "write something..."); 

});

Answer 1

The blur event will always fire when a single element loses focus. What you will need to do is check what element has been focused when a single element in #create loses focus. If the newly focussed element is outside of the div then you can change the classes. To do this you can simply check if the focussed element is not a child of #create

Something like

$("#create > *").blur(function() {
  if($("#create > *:focus").length == 0) {
      $(".expand-expand").addClass("expand");
      $(".expand").removeClass("expand-expand");
      $("#create").addClass("create");
      $("#create").removeClass("create-expand");
      $(".write-title-expand").addClass("write-title");
      $(".write-title").removeClass("write-title-expand");
      $(".summary-expand").addClass("summary");
      $(".summary").removeClass("summary-expand");
      $(".input-expand").addClass("input");
      $(".input").removeClass("input-expand");
      $(".submit-expand").addClass("submit");
      $(".submit").removeClass("submit-expand");
      $("#name").attr("value", "write something..."); 
  }
});