title: Display submenu on click in pure JavaScript
body: <blockquote>
    <p>See further below for solution</p>
  </blockquote>
  
  <p>I built a dropdown menu where the submenu currently appears on hover thanks to the following CSS:</p>
  
  <pre><code>.main-menu ul li:hover &gt; ul { display: block; }
  </code></pre>
  
  <p>However my design requires the submenu to display on click and remain visible until the user clicks elsewhere on the page (or on the close button in this example). Based on a few similar questions here, e.g. <a href="https://stackoverflow.com/questions/22510535/css-hover-to-onclick-conversation/22510659#22510659?newreg=3cbd4608031d4ca1a3c9d15f9f6b89f6">css hover to onclick conversation</a>, it looks like I need to use JavaScript <code>setAttribute</code> to add class <code>active</code> on click:</p>
  
  <pre><code>.main-menu ul li.active &gt; ul { display: block; }
  </code></pre>
  
  <p>The examples I've seen achieve this by using the below JS, which gets the element by ID, but I'm obviously unable to give the same ID to each of my submenus. I could give different IDs to each and then write a new function each time but is there a better way to "get" these elements? I've tested with classes and <code>querySelectorAll()</code> to try and target the exact tags but I'm obviously missing something. I'd be so grateful if anyone could point me in the right direction.</p>
  
  <pre><code>window.onload = init;
  function init()
  {
      document.getElementById('openSubmenu').onclick   = openSubmenu;
      document.getElementById('closeSubmenu').onclick  = closeSubmenu;
  }
  
  function openSubmenu()
  {
      document.getElementById('openSubmenu').setAttribute('class','active');
  }
  
  function closeSubmenu()
  {
      document.getElementById('openSubmenu').removeAttribute('class','active');
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="closeSubmenu"&gt;Close submenu&lt;/div&gt;
  &lt;nav&gt;
    &lt;div class="main-menu"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li id="openSubmenu"&gt;&lt;a href="#"&gt;Dropdown 1&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;First tier&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;First tier&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;  
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Dropdown 2&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;First tier&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;First tier&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;First tier&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.main-menu {
    width: 100%;
    left: 0;
  }
  
  .main-menu ul {
    position: relative;
    text-align: center;
  }
  
  .main-menu ul li { display: inline-block; }
  
  .main-menu li a {
    line-height: 40px;
    padding: 10px 20px;
    text-transform: uppercase;
    text-decoration: none;
    color: #494949;
  }
  
  /* Hide dropdowns by default */
  
  .main-menu ul ul {
    width: 100%;
    position: absolute;
    display: none;
    left: 0;
    background-color: #c6c6c6;
  }
  
  /* Display Dropdowns on Hover */
  
  .main-menu ul li:hover &gt; ul { display: block; }
  
  /* Display Dropdowns on Click */
  
  .main-menu ul li.active &gt; ul { display: block; }
  </code></pre>
  
  <blockquote>
    <p>SOLUTION</p>
    
    <p>With the below code the relevant submenus open
    on click, close when you click again on the submenu name and close when you
    click on a regular "non-submenu" element.</p>
    
    <p>HTML</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
        &lt;li class="menuItem"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class="submenu"&gt;&lt;a href="#"&gt;Dropdown 1&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;First tier&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;First tier&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;  
        &lt;/li&gt;
        &lt;li class="submenu"&gt;&lt;a href="#"&gt;Dropdown 2&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;First tier&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;First tier&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;First tier&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="menuItem"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;li class="menuItem"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
    
    <p>CSS</p>
  
  <pre><code>nav {
    width: 100%;
    left: 0;
  }
  
  nav ul {
    position: relative;
    text-align: center;
  }
  
  nav ul li { display: inline-block; }
  
  nav li a {
    line-height: 40px;
    padding: 10px 20px;
    text-transform: uppercase;
    text-decoration: none;
    color: #494949;
  }
  
  /* Hide dropdowns by default */
  
  nav ul ul {
    width: 100%;
    position: absolute;
    display: none;
    left: 0;
    background-color: #c6c6c6;
  }
  
  /* Display Dropdowns on Click */
  
  nav ul li.active &gt; ul {
    display: block;
  }
  </code></pre>
    
    <p>JS </p>
  
  <pre><code>window.onload = init;
  function init()
  {
    // set-up regular buttons
    var menuItemElements = document.getElementsByClassName('menuItem');
    for (var i = 0; i &lt; menuItemElements.length; i++) {
      menuItemElements[i].onclick = resetSubmenus;
    }
    // set-up buttons with submenu
    resetSubmenus();
  }
  
  function openSubmenu()
    {
      resetSubmenus();
      this.setAttribute('class','submenu active');
      this.onclick = resetSubmenus;
    }
  
  function resetSubmenus()
    {
      var submenuElements = document.getElementsByClassName('submenu');
      for (var i = 0; i &lt; submenuElements.length; i++) {
        submenuElements[i].setAttribute('class','submenu');
        submenuElements[i].onclick = openSubmenu;
      }
  }
  </code></pre>
  </blockquote>