Hamburger menu with Javascript - clearing state I wanted a menu that is always a hamburger, regardless of screen size. Plus it has to be activated by click, not hover.
Any comments / review will be appreciated.
Pls let me know if this is not worded properly / off topic etc.
Please see Codepen
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;title&gt;Sample website&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/test.css&quot;&gt;  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;menuBar&quot;&gt;
    &lt;div class = &quot;menuHamburger&quot; onclick = &quot;hideAllButFirstChild('menuBar')&quot;&gt; &amp;#9776; &lt;/div&gt;
    &lt;ul id='menu1'&gt;
      &lt;li onclick=&quot;hideAllButFirstChild('menu1')&quot;&gt;Menu 1&lt;/li&gt;
      &lt;li&gt;Menu 1-1&lt;/li&gt;
      &lt;li&gt;Menu 1-2&lt;/li&gt;
      &lt;li&gt;Menu 1-3&lt;/li&gt;
      &lt;li&gt;Menu 1-4&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul id='menu2'&gt;
      &lt;li onclick=&quot;hideAllButFirstChild('menu2')&quot;&gt;Menu 2&lt;/li&gt;
      &lt;li&gt;Menu 2-1&lt;/li&gt;
      &lt;li&gt;Menu 2-2&lt;/li&gt;
      &lt;li&gt;Menu 2-3&lt;/li&gt;
      &lt;li&gt;Menu 2-4&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul id='menu3'&gt;
      &lt;li onclick=&quot;hideAllButFirstChild('menu3')&quot;&gt;Menu 3&lt;/li&gt;
      &lt;li&gt;Menu 3-1&lt;/li&gt;
      &lt;li&gt;Menu 3-2&lt;/li&gt;
      &lt;li&gt;Menu 3-3&lt;/li&gt;
      &lt;li&gt;Menu 3-4&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;

    &lt;script src=&quot;js/test.js&quot;&gt;&lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;

#menuBar &gt; ul  {
    display: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10em;

}

li {
    list-style-type:none;
    margin: 1px;
    padding: 1px;
}

li:first-child {
    background: grey;
    color: #fff;
}

li:not(:first-child) {
    display: none;
}

.menuHamburger {
    font-size: 2em;
}

function hideAllButFirstChild(parentId) {
 
    var children = document.getElementById(parentId).children;
    for (var i=0; i &lt; children.length; i++) {

       if (children[i].style.display=='' || children[i].style.display=='none') {

       children[i].style.display=&quot;block&quot;;

       // but set its children to none?

       } else {

            // block all except first
            if (i != 0) { children[i].style.display=&quot;none&quot;; }
            
        }

     }

}
HTML

The formating could be a bit cleaner (&lt;/head&gt; on its own line, superfluous spaces around =, content of &lt;div id=&quot;menuBar&quot;&gt; not indented).
on... attributes shouldn't be used. Event handlers should be assigned in the script.
I don't believe &amp;#9776; (&quot;Trigram For Heaven&quot;) is a suitable character to use for a  menu icon.
The submenus aren't structured properly in my opinion:

The clickable header entries shouldn't be list items themselves, but separate elements before the ul.
Also they should be an interactive elements such as &lt;button&gt; or &lt;a&gt;.
If you would also wrap all the submenus in a separate item with the hamburger button before it, then you could simplify the JavaScript so that it simply toggles that single element, which spares you the loop and the exception of the first element.
Alternatively you could even consider using the &lt;details&gt; element, which has the toggling built in, requiring no JavaScript at all.



JavaScript

Instead of passing the ID of the parent element into the function you could get the clicked element (and thus its parent) from the event object. Example:

// Assign event handler in JavaScript instead of using the HTML attribute
document.querySelector(&quot;.menuHamburger&quot;).addEventListener(&quot;click&quot;, hideAllButFirstChild);

function hideAllButFirstChild(event) {
   // TODO Add null checks.
   const children = event.target.parent.children;

   // ...
}


And as seen above use const or let instead of var for variables.
Start the loop at i = 1 to skip the first element instead of checking inside the loop.
Instead of manipulating style in JavaScript set/remove a class (or, better, in this case the hidden attribute)