title: Improve javascript code for drop down menu
body: <p>The below code has two drop down menus which load container on button click and drop down closes on clicking anywhere on page. Though the window load works but the pages inside takes too much time to load even on local server obviously because my javascript code isn't the way it should. So guys what should my javascript code like so that it loads page correctly and at the same time closes drop down on clicking anywhere on page [if both drop downs are open both should close on click like in snippet].</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction(event) {
    event.stopPropagation();
    document.getElementById("myDropdown").classList.toggle("show");
  }
  
  function myFunction2(event) {
    event.stopPropagation();
    document.getElementById("myDropdown2").classList.toggle("show");
  }
  window.onclick = function(event) {
    $("#notificationContainer").load("notifications.php");
    document.getElementById("myDropdown").classList.remove("show");
    $("#scoreContainer").load("score.php");
    document.getElementById("myDropdown2").classList.remove("show");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dropdown,
  .dropdown2 {
    position: relative;
    display: inline-block;
  }
  /* Dropdown Content (Hidden by Default) */
  
  .dropdown-content,
  .dropdown-content2 {
    display: none;
    background-color: #fff;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    right: 0;
  }
  .dropdown-content a,
  .dropdown-content2 a {
    padding: 10px 16px;
    text-decoration: none;
    display: block;
  }
  .show {
    display: block;
  }
  .dropbtn {
    height: 25px;
    width: 50px;
    border: none;
    background-color: white;
    background: red;
  }
  .dropbtn2 {
    height: 25px;
    width: 50px;
    border: none;
    background-color: white;
    background: green;
  }
  .dropdown-content,
  .dropdown-content2 {
    border: 2px solid #c6c6c6;
    border-top: none;
  }
  #notificationContainer,
  #scoreContainer {
    min-width: 400px;
    min-height: 100px;
    border: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td style="padding-right:15px;"&gt;
        &lt;a href="home.php" class="hombtn"&gt;&lt;/a&gt;
      &lt;/td&gt;
      &lt;td style="padding-right:15px;"&gt;
        &lt;div class="dropdown2"&gt;
          &lt;button onclick="myFunction2(event)" class="dropbtn2"&gt;one&lt;/button&gt;
          &lt;div id="myDropdown2" class="dropdown-content2"&gt;
            &lt;div id="scoreContainer"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td style="padding-right:15px;"&gt;
        &lt;div class="dropdown"&gt;
          &lt;button onclick="myFunction(event)" class="dropbtn"&gt;two&lt;/button&gt;
          &lt;div id="myDropdown" class="dropdown-content"&gt;
            &lt;div id="notificationContainer"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The above javascript is modified from the below single drop down menu code which loaded the page inside container instantly, but my modified version [above] takes too much time:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
  }
  
  window.onclick = function(event) {
  $( "#notificationContainer" ).load( "notifications.php" );
  if (!event.target.matches('.dropbtn')) {
  
  var dropdowns = document.getElementsByClassName("dropdown-content");
  var i;
  for (i = 0; i &lt; dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
      openDropdown.classList.remove('show');
      }
     }
   }
  }
  &lt;/script&gt; 
  </code></pre>