Hamburger menu with Javascript - clearing state
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)