title: Click outside div and close div, even if div is not a child of the parent
body: <p>I have two div's that I open that kinda belong together, but for programming reasons can't be connected. I simplified the code here because it's a lot of code. This is the basic.</p>
  
  <pre><code>&lt;div id="container"&gt;
  
    &lt;div id="div1"&gt;
       &lt;div&gt; when I am clicked I will open div2 &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="div2"&gt;
       &lt;div&gt; I can be clicked and all the div's stay open &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt; 
  </code></pre>
  
  <p>And this is the connected JavaScript</p>
  
  <pre><code>  $(document).mouseup(function (e) {
      var container = $("#div1");
      if (!container.is(e.target) &amp;&amp; container.has(e.target).length === 0) {
        container.hide();
      }
    });
  
    $(document).mouseup(function (e) {
      var container = $("#div2");
      if (!container.is(e.target) &amp;&amp; container.has(e.target).length === 0) {
        container.hide();
      }
    });
  </code></pre>
  
  <p>Now what I would like to do is when I click outside <code>div1</code> it should close <code>div1</code>.</p>
  
  <p>When I click on <code>div1</code> it opens <code>div2</code>.</p>
  
  <p>Currently with the above when I click in <code>div2</code> it closes <code>div1</code>, because it is not a child of <code>div1</code>. So it should keep <code>div2</code> opened.</p>
  
  <p>And when I click outside <code>div1</code> or <code>div2</code> it should close the two div's. </p>
  
  <p>How can I combine the two JavaScript codes to get the explained behaviour?</p>
  
  <p><strong>Summary of what I try to accomplish:<br></strong></p>
  
  <ol>
  <li>Click on the div inside <code>div1</code> will open <code>div2</code></li>
  <li>Click outside <code>div1</code> or <code>div2</code> will close both <code>div1</code> and <code>div2</code>.</li>
  <li>In case the div inside <code>div1</code> is not clicked and one clicks outside
  <code>div1</code>, it should close <code>div1</code>.</li>
  </ol>