title: JS Code: Comments
body: <p>Im looking at this piece of code from W3 Schools</p>
  
  <pre><code>&lt;script&gt;
  /* When the user clicks on the button, 
  toggle between hiding and showing the dropdown content */
  function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
  }
  
  // Close the dropdown if the user clicks outside of it
  window.onclick = function(event) {
  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>
  
  <p>I know what it does (opens and closes a drop down nav bar), but i dont know what each line of code means / how it does it. I was wondering if anyone here would be kind enough to comment/annotate each line of code with what its doing so i can further understand it and learn from it. </p>
  
  <p>thanks</p>