title: Run function when all div elements are set to display:none
body: <p>In this code I want the paragraph text to change to murderer after all the div elements are display to none. In this problem the paragraph text changes to murderer only one of the div elements are display to none. I understand I can use the if statement and give the condition for display:none individually and then run the function but what if there are hundred div elements. This is just a fun experiment and I need an efficient way of doing this. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Learning jQuery&lt;/title&gt;
  
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;style&gt;
       #green {
        width:200px;
        height:200px;
        background-color:green;
        border-radius:50%;
        margin-top:50px;
       }
       .red {
        width:200px;
        height:200px;
        background-color:red;
        margin-top:50px;
       }
      &lt;/style&gt; 
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;div id="green"&gt;&lt;/div&gt;
   &lt;div class="red"&gt;&lt;/div&gt;
   &lt;div class="red"&gt;&lt;/div&gt;
   &lt;h1 id="murder"&gt;Hello&lt;/h1&gt;
   &lt;script&gt;
    $("murder").html("murderer!");
    $("div").click(function() {
     $(this).css("display", "none");
     if ($("div").css("display") == "none") {
      $("#murder").html("murderer!"); 
     }
    });
   &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>