title: how to close expandable menu with click outside div and js
body: <p>I created an expandable menu in js. I add the open class with the click event, and click again to remove that class.</p>
  
  <p>I want to close the menu when i click outisde the menu. I tried with document.addEventListener but does not seem to work.</p>
  
  <pre><code>function collapse() {
      if (this.classList.contains('open')) {
          this.classList.remove('open');
          document.removeEventListener('click', collapse, false);
      } else {
          this.classList.add('open');
          document.addEventListener('click', collapse, false);
      }
  }
  
  
  var x = document.getElementsByClassName("toggle-menu");
  for (var i = 0; i &lt; x.length; i++) {
      x[i].addEventListener('click', collapse, false);
  }
  </code></pre>
  
  <p>Here the fiddle <a href="http://jsfiddle.net/4cv220mc/" rel="nofollow">http://jsfiddle.net/4cv220mc/</a></p>
  
  <p>Thanks</p>