Javascript Click To Open And Close Menu, NOT Using Jquery

I want to have a menu, that I can click on to open, and click on to close. Similar to a hover menu, but with clicking, to open, and clicking to close. I have three visible list ite

Solution 1:

Just toggle an ID for the open menu. One method, onclick, which does it all.

function showmenu(elem) {
  // Clear any currently open menu
  var openMenu = document.getElementById("activeMenu");
  if (openMenu) {
    openMenu.removeAttribute("id");
    // Stop if we're just closing the current menu
    if (openMenu === elem) {
      return;
    }
  }

  // Only apply it if the element actually has LI child nodes.
  // OPTIONAL: Will still work without if statement.
  if (elem.getElementsByTagName("li").length > 0) {
    elem.setAttribute("id", "activeMenu");
  }
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
  float: left;
  padding: 0 10px;
}
ul ul {
  display: none;
}
ul ul li {
  float: none;
}
#activeMenu ul {
  display: block;
}

<ul>
  <li onclick="showmenu(this)">Menu Item 1</li>
  <li onclick="showmenu(this)">Drop Down 1
    <ul>
      <li>DD1 Item 1</li>
      <li>DD1 Item 2</li>
    </ul>
  </li>
  <li onclick="showmenu(this)">Drop Down 2
    <ul>
      <li>DD2 Item 1</li>
      <li>DD2 Item 2</li>
    </ul>
  </li>
</ul>

Note that I used onclick just for simplicity. Adding the click event you did is the right way.

Solution 2:

function showMenu(elem) {
      // Clear any currently open menu
      var openMenu = document.getElementById("activeMenu");
  if (openMenu) {
        openMenu.removeAttribute("id");
        // Stop if we're just closing the current menu
        if (openMenu === elem) {
          return;
    }
  }

      // Only apply it if the element actually has LI child nodes.
      // OPTIONAL: Will still work without if statement.
      if (elem.getElementsByTagName("ul").length > 0) {
        elem.setAttribute("id", "activeMenu");
      }
    }

        function showSubMenu(elem) {
      // Clear any currently open menu
          var openMenu = document.getElementById("activeMenu");
      if (openMenu)
        openMenu.removeAttribute("id");
      var openSubMenu = document.getElementById("activeSubMenu");
      if (openSubMenu) {
        openSubMenu.removeAttribute("id");
        // Stop if we're just closing the current menu

      }

      // Only apply it if the element actually has LI child nodes.
      // OPTIONAL: Will still work without if statement.
      if (elem.getElementsByTagName("ul").length > 0) {
        elem.setAttribute("id", "activeSubMenu");
      }
    }
        function showLastSubMenu(elem) {
      // Clear any currently open menu
          var openMenu = document.getElementById("activeMenu");
      if (openMenu)
        openMenu.removeAttribute("id");
      var openSubMenu = document.getElementById("activeSubMenu");
      if (openSubMenu) 
        openSubMenu.removeAttribute("id");
        // Stop if we're just closing the current menu
    var openLastSubMenu = document.getElementById("activeSubMenu");
      if (openLastSubMenu) {
        openLastSubMenu.removeAttribute("id");

}
      // Only apply it if the element actually has LI child nodes.
      // OPTIONAL: Will still work without if statement.
      if (elem.getElementsByTagName("ul").length > 0) {
        elem.setAttribute("id", "activeLastSubMenu");
      }
    }

I post the full code, that with much help from @David resultet in a clickable menu solution, Thanks alot :)

the css items #someMenu ul, #somemenu ul li, and #someMenu ul ul had to be changed to classes, so .someMenu ul etc. #activeMenu > ul { display: block; }

#activeSubMenu > ul {
  display: block;
}
#activeLastSubMenu > ul {

  display: block;
}  

And in the html,

<nav id ="someMenu" class="someMenu">
function showMenu on the first level li's, 
function showSubMenu for next level
function showLastSubMenu for the last sub's (I had max 3 levels)

Alot of repeating, so I will try and make it into less code, with array and addEventListener, as you stated in you answer that is more correct!