title: Hide every menu opened just after click a link from it
body: <p>I am making an Off Canvas sidebar dropdown menu in vanilla JS.
  Almost at the bottom of my JS code I have made a function to hide the sidebar off canvas just after someone clicks an href link.
  Also I have made a function to hide and show the hidden submenu level of the dropdown menu in order to click them.
  But now I need a function to close every opened dropdown menu from the sidebar when a user clicks an href link, just before getting the user to anoher site page. Then, when the user opens again the menu all dropdowns will be closed.
  NOTE: 'aTags' is the name of the variable that points to every clickeable href element
  Any advice will be very helpfull!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const open = document.querySelector('.open');
  let list_items = document.querySelectorAll('#subb');
  let overlay = document.querySelector('.overlay');
  let aTags = open.getElementsByClassName('ilink');
  
  
  
  // Show and Hide sidebar when click icon
  let toggles = document.querySelectorAll(".c-hamburger");
  
  for (let i = toggles.length - 1; i &gt;= 0; i--) {
    let toggle = toggles[i];
    toggleHandler(toggle);
  };
  
  function toggleHandler(toggle) {
  
    toggle.addEventListener("click", function(e) {
      e.preventDefault();
      if (this.classList.contains("is-active") === true) {
        this.classList.remove("is-active");
        open.classList.remove('oppenned');
        overlay.className = 'overlay';
  
  
      } else {
        this.classList.add("is-active");
        open.classList.add('oppenned');
        overlay.className += ' open';
      }
    });
  
    window.addEventListener('click', function(event) {
      if (event.target === overlay) {
        toggle.classList.remove("is-active");
        open.classList.remove('oppenned');
        overlay.className = 'overlay';
      }
    });
  
  
  
    // hide sidebar off canvas when click a menu link
    for (let i = 0; i &lt; aTags.length; i++) {
      aTags[i].addEventListener("click", close);
    }
  
    function close(e) {
      e.stopPropagation();
      open.classList.remove('oppenned');
      toggle.classList.remove("is-active");
      overlay.className = 'overlay';
  
  
    }
  
  
    // Show and Hide the hidden Submenu ul
    for (let i = 0; i &lt; list_items.length; i++) {
      list_items[i].addEventListener("click", show);
    }
  
    function show(e) {
  
      e.stopPropagation();
      this.classList.toggle("myClass");
    }
  
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sub-menu ul ul {
    max-height: 0;
    position: relative;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease-out;
    background: white;
  }
  
  #subb.myClass&gt;ul {
    max-height: 32em;
    visibility: visible;
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav id="nav" class="sub-menu open"&gt;
    &lt;ul class="list-unstyled"&gt;
      &lt;li id="subb"&gt;
        &lt;a class="link"&gt;Soluciones&lt;/a&gt;
        &lt;ul&gt;
          &lt;li id="subb"&gt;
            &lt;a class="link"&gt;Correo y herramientas colaborativas&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a class="link ilink" href="https://www.google.com/"&gt;Google Workspace&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="link ilink href=" https://www.google.com/ ""&gt;Google for Education&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="link ilink" href="https://www.google.com/"&gt;Microsoft 365&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
  
  
        &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>