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.

functionshowmenu(elem) {
  // Clear any currently open menuvar openMenu = document.getElementById("activeMenu");
  if (openMenu) {
    openMenu.removeAttribute("id");
    // Stop if we're just closing the current menuif (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;
}
ulli {
  float: left;
  padding: 010px;
}
ulul {
  display: none;
}
ululli {
  float: none;
}
#activeMenuul {
  display: block;
}

<ul><lionclick="showmenu(this)">Menu Item 1</li><lionclick="showmenu(this)">Drop Down 1
    <ul><li>DD1 Item 1</li><li>DD1 Item 2</li></ul></li><lionclick="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:

functionshowMenu(elem) {
      // Clear any currently open menuvar openMenu = document.getElementById("activeMenu");
  if (openMenu) {
        openMenu.removeAttribute("id");
        // Stop if we're just closing the current menuif (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");
      }
    }

        functionshowSubMenu(elem) {
      // Clear any currently open menuvar 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");
      }
    }
        functionshowLastSubMenu(elem) {
      // Clear any currently open menuvar 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 menuvar 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 fornext 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!